0

I am using vue/nuxt and I have an image carousel that I want to populate..

In my assets folder, I have a folder called "AreaPictures" that contains the images I would like to insert into the carousel.

my v-for looks like this:

<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>

Here is my script section:

<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>

As you can see I am getting the file names and then in the src of each image I am using:

:src="`../assets/AreaPictures${image.imageURL}`"

The error I'm getting in the console is:

vue.runtime.esm.js?2b0e:6785 GET http://localhost:3000/assets/AreaPictures/area1.jpg 404 (Not Found)

So it seems I am getting the correct file name however the path is not correct. I have also tried using @/assets/AreaPictures/area1.jpg however this also doesn't work.

I'm guessing this is not the right way to reference file paths dynamically, can anybody explain how to do it in this case?

Thanks in advance!

squish
  • 846
  • 12
  • 24

1 Answers1

2

Vue.js dynamic images not working Check this, it helped me out a lot. You have to wrap your image sources in require() so Webpack can load it.

Fahd Arafat
  • 685
  • 5
  • 12