Отобразить изображение в ответ ajax в таблице

Question

Я работаю над проектом laravel. Я загрузил изображение, используя ajax, в базу данных и в локальную папку «public / images». Но я не могу показать изображение без обновления моей страницы. Некоторая ошибка в функции успеха ответаКто-нибудь может мне помочь?

success:function(data)
            {
                $('.error').remove();
                $('#table').append("<tr class='post" + data.id + "'>"+
                    "<td>" + data.id + "</td>"+
                    "<td>" + data.name + "</td>"+
                    "<td>" + data.bank_name  + "</td>"+
                    "<td>" + data.bankbranch_location + "</td>"+
                    "<td>" + data.image + "</td>"+
                    "<td>" + data.created_at + "</td>"+
                    "<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-bank_id='" + data.bank_name + "' data-bankbranch_id='" + data.bankbranch_location + "' data-name='" + data.name + "' data-phone='" + data.phone + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-bank_id='" + data.bank_name + "' data-bankbranch_id='" + data.bankbranch_location + "' data-name='" + data.name + "' data-phone='" + data.phone + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-bank_id='" + data.bank_name + "' data-bankbranch_id='" + data.bankbranch_location + "' data-name='" + data.name + "' data-phone='" + data.phone + "'><span class='glyphicon glyphicon-trash'></span></button></td>"+
                    "</tr>");
            }

Answer 1

Когда вы отдыхаете, вы должны использовать show image

success:function(data)
{
    $('.error').remove();
    let html = `
    <tr class='post${data.id}'>
        <td>${data.id}</td>
        <td>${data.name}</td>
        <td>${data.bank_name}</td>
        <td><img src="path/to/${data.image}" alt=""></td>
        <td>${data.created_at}</td>
        <td>
          <div data-id='${data.id}' data-bank_id='${data.bank_name}' data-bankbranch_id='${data.bankbranch_location}' 
                  data-name='${data.name}' data-phone='${data.phone}'>
              <button class='show-modal btn btn-info btn-sm'> <span class='fa fa-eye'></span> </button>
              <button class='edit-modal btn btn-warning btn-sm'><span class='glyphicon glyphicon-pencil'></span></button>
              <button class='delete-modal btn btn-danger btn-sm'><span class='glyphicon glyphicon-trash'></span></button>
          </div>
        </td>
    </tr> `;

    $('#table').append(html);
}

Answer 2

Вам необходимо вставить data.image в атрибут src тега image.

"<td>" + <img src='/yourpath/' + data.image + "> </td>"

Для общего пути в Laravel используйте:

"<td>" + <img src='{{ URL::asset('images/') }}' +'/' + data.image + "> </td>"

Answer 3

Это мой контроллер, из которого данные сохраняются в базе данных и в локальной папке с именем "images" и дают ответ на функцию ajax с этими данными

public function store(Request $request)
{
         $validator = Validator::make($request->all(), [
        'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
      ]);


      if ($validator->passes()) {


        $input = $request->all();
        $input['image'] = time().'.'.$request->image->getClientOriginalExtension();
        $request->image->move(public_path('images'), $input['image']);



       $employee= Employee::create($input);


        return response()->json($employee);
      }


      return response()->json(['error'=>$validator->errors()->all()]);
    }