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

Question

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

Nikola Pavicevic · Accepted Answer · 2021-07-13 18:20:01Z

1

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.

edited Jul 13, 2021 at 18:20

answered Jul 13, 2021 at 17:57

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related