在 table 中显示 ajax 响应中的图像

Question

我正在处理 laravel project.I 已经使用数据库中的 ajax 上传了图像，并上传到本地 "public/images" 文件夹，因为 well.But 我不能在不刷新我的 page.Some 错误响应成功的情况下显示图像 function.Can 有人帮我吗？

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

这是我的控制器，数据从那里保存在数据库和名为 "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()]);
    }

Answer 2

When you res you should use 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 3

您需要在 image 标签的 src 属性中插入 data.image。

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

对于 Laravel 中的 Public 路径，使用：

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

在 table 中显示 ajax 响应中的图像

Display Image in ajax response in a table

ajax

image

laravel

display