In resources/images
directory i have 10 images that i want to show through vue3-carousel
library, the images names are 1.jfif
, 2.jfif
..etc, but the attribute binding doesn’t work like this, it gives error : Property assignment expected.
:
<Slide v-for="slide in 10" :key="slide">
<div class="carousel__item">
<img :src="../../images/{{slide}}.jfif" width="500" />
</div>
</Slide>
i also tried like this, using template string:
<img :src="`../../images/${slide}.jfif`" width="500" />
but it will then look for images in the public
directory instead, it give me errors like /images/2.jfif:1 GET http://localhost/images/2.jfif 404 (Not Found)
how can i solve that issue? thanks
3
Answers
You could incode your images in Base64, then you can use it on the bind.
This website will do it for you: https://www.base64-image.de/.
Just upload your images there, click show code and copy whats underneath
For use in <img> elements:
.Since the base64 encoding is very big, I’d recommend you store in a separated file to keep your code organized.
Example:
images.js
Then, you import and use it on the bind accordingly.
you need to use
require()
function to reference local assets correctlyBy wrapping the filepath inside
require()
Webpack which comes bundled with Laravel will handle loading the correct asset during build time.