Отображение изображения в ответе ajax в таблице
Я работаю над проектом 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>");
}
Привет. Мои другие добавленные данные поступают без обновления страницы, потому что я использую ajax. Мне не удалось поместить источник изображения в функцию ответа ajax. Я не уверен, как это сделать.
Вы можете сказать нам, что содержит data? Откуда это взялось? Вы можете выполнить console.info внутри функции успеха, чтобы убедиться, что правильные данные, как вы ожидаете, присутствуют.
ваше изображение появляется после перезагрузки страницы? или вы не можете получить свое изображение?
Перед перезагрузкой страницы отображается только имя изображения, полученное из базы данных. например: "something.jpg" Но после перезагрузки страницы появляется само изображение.
Ответы 3
Это мой контроллер, откуда данные сохраняются в базе данных и в локальной папке под названием «изображения» и дает ответ на функцию 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()]);
}
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);
}
Вам необходимо вставить data.image в атрибут src тега image.
"<td>" + <img src='/yourpath/' + data.image + "> </td>"
Для публичного пути в Laravel используйте:
"<td>" + <img src='{{ URL::asset('images/') }}' +'/' + data.image + "> </td>"
Uncaught SyntaxError: Неожиданный токен <
если вы хотите отображать изображение, не обновляя страницу, вы можете обновить свою таблицу .. Итак, после добавления новых данных или обновления данных вы можете обновить свою таблицу