Good day! So I have been practising web development again and found Laravel to be fun to learn (and I'm enjoying it a lot) and I have decided to recreate my portfolio website with it to practice it.
So the problem is this:
I am trying to display a list of images from a folder called designImages and this will be updated every time I have a good UI design. so it makes sense to make it dynamically ready so I do not have to manually add <img> tags for every image and make my process a lot longer. I plan to just make a js file that will only be adjusted once depending on how many images are currently in the folder.
But the problem is when I display the images on my blade page, it shows the broken image icon view it here
EDIT: When I try to inspect element, the image is not displaying and instead, shows 404 error. mywebsite.test/designImages/design-1 for example.
The code on my js file is this
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);
}
and the code for the master file (app.blade.php) for my index.blade.php is:
<body>
@yield('content-5')
@stack('head')
</body>
and the index.blade.php code is this:
@section('content-5')
<div class="imageContainer">
<!-- images will come here -->
</div>
@endsection
@push('head')
<script src="{{ asset('js/imageGrid.js')}}"></script>
@endpush
Any help or tips will be greatly appreciated :)
-----EDIT-----
Fixed it! :) the updated javascript code is this:
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);
}
fixed it using this code:
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);
}