Display Image in ajax response in a table - ajax

Question

I am working on a laravel project.I have uploaded image using ajax in database and to the local "public/images" folder as well.But i can not show the image without refreshing my page.Some mistake in response success function.Can anyone help me out?
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

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 2

This is my controller from where the data is saved in database and in a local folder called "images" and giving a response to the ajax function with these datas
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

You need to insert the data.image inside the src attribute of image tag.
"<td>" + <img src='/yourpath/' + data.image + "> </td>"
For Public path in Laravel use:
"<td>" + <img src='{{ URL::asset('images/') }}' +'/' + data.image + "> </td>"