¡Buenos días! Así que he estado practicando el desarrollo web nuevamente y descubrí que Laravel es divertido de aprender (y lo disfruto mucho) y decidí recrear el sitio web de mi cartera con él para practicarlo.
Entonces, el problema es este: estoy tratando de mostrar una lista de imágenes de una carpeta llamada designImages y esto se actualizará cada vez que tenga un buen diseño de interfaz de usuario. por lo tanto, tiene sentido prepararlo dinámicamente para no tener que agregar manualmente etiquetas <img> para cada imagen y hacer que mi proceso sea mucho más largo. Planeo crear un archivo js que solo se ajustará una vez dependiendo de cuántas imágenes haya actualmente en la carpeta.
Pero el problema es que cuando muestro las imágenes en la página de mi hoja, muestra el ícono de imagen rota. Véalo aquí.
EDITAR: cuando intento inspeccionar el elemento, la imagen no se muestra y, en cambio, muestra el error 404. mywebsite.test/designImages/design-1 por ejemplo.
El código en mi archivo js es este
const imageContainer = document.querySelector(".imageContainer");
for (let i = 1; i < 14; i++) { const img = document.createElement("img"); img.src = "{{ asset('designImages/design-${i}.png') }}"; imageContainer.append(img); } y el código para el archivo maestro ( app.blade.php ) para mi index.blade.php es:
<body> @yield('content-5') @stack('head') </body>y el código index.blade.php es este:
@section('content-5') <div class="imageContainer"> <!-- images will come here --> </div> @endsection @push('head') <script src="{{ asset('js/imageGrid.js')}}"></script> @endpushCualquier ayuda o consejo será muy apreciado :)
-----EDITAR-----
¡Arreglado! :) el código javascript actualizado es este:
const templateURL = "storage/designImages/design-?.png"; const imageContainer = document.querySelector(".imageContainer"); for (let i = 1; i < 14; i++) { const img = document.createElement("img"); img.src = templateURL.replace("?", i); imageContainer.append(img); }lo arregló usando este código:
const templateURL = "storage/designImages/design-?.png"; const imageContainer = document.querySelector(".imageContainer"); for (let i = 1; i < 14; i++) { const img = document.createElement("img"); img.src = templateURL.replace("?", i); imageContainer.append(img); }