I'm trying to build an image gallery using Vue.js and local images are not loading. I have the src attributes set in the data attribute and can only seem to load images from external sources. Example:
data() {
return {
images: [
"../assets/images/photos/bathroom/bathroom-1.png",
"https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg",
],
};
},
With the rest of my code to scroll through the gallery, the first image doesn't load though the second image does. I figure it's something to with the the way Vue compiles everything, as I can display the image statically with a regular tag and setting the src manually.
Wrap any relative path in require().
In your case:
export default {
data: () => ({
images: [
require("../assets/images/photos/bathroom/bathroom-1.png"),
"https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg"
]
})
}
Documentation: Vue Loader.