I am currently using Vue/Nuxt and facing an issue with populating an image carousel. The images I want to insert into the carousel are stored in a folder named "AreaPictures" within my assets directory.
This is how my v-for loop is structured:
<div class="area__slider">
<div v-swiper="swiperOption">
<div class="swiper-wrapper">
<div v-for="image in images" :key="image" class="swiper-slide">
<img :src="`../assets/AreaPictures${image.imageURL}`" alt="" />
</div>
</div>
</div>
</div>
Below is my script section for reference:
<script>
export default {
name: 'Area',
data: function () {
return {
videoLanguage: 'English',
englishSrc: 'https://www.youtube.com/embed/lRKmJqDbVsY',
spanishSrc: 'https://www.youtube.com/embed/q0WkEkIMmQo',
currentSrc: 'https://www.youtube.com/embed/lRKmJqDbVsY',
swiperOption: {
grabCursor: true,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
},
},
//----- ARRAY TO STORE THE IMAGE PATHS
images: [],
}
},
//-----IMPORT THE IMAGES ON MOUNT
mounted() {
this.importImages(require.context('~/assets/AreaPictures/', true))
},
methods: {
changeSrc() {
if (this.videoLanguage === 'English') {
this.currentSrc = this.englishSrc
} else {
this.currentSrc = this.spanishSrc
}
},
//-----THIS IS WHERE I IMPORT THE IMAGES
importImages(r) {
r.keys().forEach((key) => {
var path = key.substring(1) //-----THE PATH FOR SOME REASON CONTAINS A . SO I REMOVE IT
this.images.push({
imageURL: path, //----- CREATE A NEW OBJECT AND ADD IT TO IMAGES
})
})
},
},
}
</script>
The console error message states:
vue.runtime.esm.js?2b0e:6785 GET http://localhost:3000/assets/AreaPictures/area1.jpg 404 (Not Found)
It seems that I am getting the correct file names but encountering issues with the file path. I have also attempted using @/assets/AreaPictures/area1.jpg, but it failed as well.
If anyone can provide insight on how to dynamically reference file paths in this scenario, your help would be greatly appreciated!