Estoy enviando solicitudes a una API usando AJAX y recuperando una respuesta con JSON que contiene el nombre de la imagen y varios datos.
Estoy tratando de mostrar estas imágenes en una tabla html, pero por alguna razón solo se muestran los iconos 404 - img not found .
Este es el código para generar el html a partir de la respuesta AJAX:
success : function(data){ $('#t tbody#search').empty(); if(data){ $('#t tbody#all').hide(); for (i = 0; i < data.length; i++) { $('#t tbody#search').append('' + '<tr><td> '+data[i].nom+' </td>' + '<td>'+data[i].prix+' </td>' + '<td>'+'<img src="{{asset('images/'~'+data[i].image +') }}"></td>'+ '<td>'+data[i].quantite+' </td>'+ '<td>'+data[i].descprod+' </td> </tr>'); }; }¿Alguien podría explicar lo que está pasando?
Esto se parece a la sintaxis de Laravel Blade:
{{ asset(...) }} Pero ese código está siendo ejecutado por Javascript. Laravel/Blade no está procesando este código, por lo que no se interpreta ni se convierte en un URI aquí; es solo texto para Javascript, y terminará con ese texto en su <img src> . Use las herramientas de desarrollo de su navegador e inspeccione la tabla generada, verá esto.
Tienes algunas opciones para resolver esto:
Si la API de back-end de donde provienen los datos es su propia aplicación, simplemente actualícela para incluir referencias totalmente calificadas a sus imágenes, de modo que no tenga que hacer nada en el front-end. Por ejemplo, en el back-end agregue algo como:
// Pseudo-code, you have to adjust for whatever you have $data['fullimage] = asset('images/' . $image);Luego, en tu Javascript puedes simplemente hacer:
'<td><img src="' + data[i].fullimage + '"></td>' + ... Si no puede actualizar el back-end, debe hacer lo que asset() normalmente hace manualmente. Asset genera una URL basada en ASSET_URL que tiene en su archivo .env .
Digamos que su ASSET_URL es http://yourwebsite/images/ ;
Y un ejemplo data[i].image es a4b0ee1ff5f531edda05043231351231.jpeg
Entonces puedes hacer referencia a eso en JS así:
'<td><img src="http://yourwebsite/images/' + data[i].image + '"></td>' + ... Si este código también se ejecuta en http://yourwebsite/ , entonces ni siquiera necesita esa parte, solo puede usar:
'<td><img src="/images/' + data[i].image + '"></td>' + ...