How to place image address in array and use that array index in source VUE JS?

user_15513031 0
Viewed 651

I’m new into vue js and I’m facing a little issue. I’m sure that its a minor issue as I’m new into it can’t able to solve it by myself. Any suggestion or solution will be acknowledge.

Thing is I want to store image address (images that will be in assets directory) in an array & then I want to pass those address as a source to img tag. for instance following is the code:

   <div class="text-h2" v-for="img in imgs" :key="img"> 
                           <img src="{{img}}" alt="">
     </div>

where the image source will be saved in src array:

export default {
    name: 'Home',
   data: () => ({
      imgs: ['./assets/img1.png','./assts/img2.png' ],
    }),

ANY HINT WILL BE REALLY APPRECIATED

vue-cli-3 vuejs2 vue-component vuetify.js vue.js
1 Answers

You can create method:

methods() {
  getImage(imagePath) {
    return require(imagePath);
  }
}

Then in template call that method:

<img :src="getImage(img)" alt="">

With :src you bind image source to img from array imgs.

user_119891890
Related