CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
GobsRuiz
GobsRuiz

Reputation: 522

Using image props - vue

I am trying to show images through v-for, but they do not appear.

<div v-for="(n, i) in images" :key="i">
    <v-img :src="{n}"></v-img>
</div>

...

images: [
     '../assets/thirdSection/Olivia.png',
     '../assets/thirdSection/Olivia.png',
     '../assets/thirdSection/luiz.png',
]

Upvotes: 0

Views: 196

Answers (2)

Arthur Borba
Arthur Borba

Reputation: 463

Try using require to load your local images:

<div v-for="(n, i) in images" :key="i">
    <v-img :src="require(n)"></v-img>
</div>

...

images: [
     '@/assets/thirdSection/Olivia.png',
     '@/assets/thirdSection/Olivia.png',
     '@/assets/thirdSection/luiz.png',
]

You just have to install file-loader to your modules and configure your webpack.

Doing it like that, your local image path is resolved into a url.

Upvotes: 0

Swapnil Soni
Swapnil Soni

Reputation: 1049

You do not need to use {} juse remove those brackets from your :src binding

<div v-for="(n, i) in images" :key="i">
    <v-img :src="n"></v-img>
</div>

...

images: [
     '../assets/thirdSection/Olivia.png',
     '../assets/thirdSection/Olivia.png',
     '../assets/thirdSection/luiz.png',
]

Upvotes: 3

Related Questions