在表中以 ajax 响应显示图像

Question

我正在做一个拉拉维尔项目。我已经在数据库中使用 ajax 上传了图像，并上传到了本地的"公共/图像"文件夹。但是如果不刷新页面，我就无法显示图像。响应成功函数中的一些错误。谁能帮我？

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

当你使用显示图像

时

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

这是我的控制器，数据保存在数据库中和名为"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 3

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

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

对于拉拉维尔的公共路径，请使用：

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