Using image props - vue

Question

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',
]

You really should not use i for the :key, it will be worse than using nothing. — kissu
– kissu, Commented Apr 1, 2021 at 12:05
@kissu Where are you reading that from? That’s totally untrue. As long as i is a string, it is actually recommended to use it as the key. — Terry
– Terry, Commented Apr 1, 2021 at 12:08
@Terry based on how it works essentially, but this is a good source to corroborate my tellings: stackoverflow.com/a/44531545/8816585 — kissu
– kissu, Commented Apr 1, 2021 at 12:12
please share your folder structure (where the componet is related to the images) — Arthur Borba
– Arthur Borba, Commented Apr 1, 2021 at 19:00

Swapnil Soni · Accepted Answer · 2021-04-01 12:04:43Z

3

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',
]

answered Apr 1, 2021 at 12:04

Swapnil Soni

1,0781 gold badge13 silver badges31 bronze badges

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

7 Comments

GobsRuiz Over a year ago

man, still not going. I tested it to see if the image path is correct and yes, it is. But it still doesn't appear

kissu Over a year ago

@VitorLucenti is your path correct ? Try to display one (just grab the first index) before trying to loop on the array. <v-img :src="images[0]"></v-img>

Swapnil Soni Over a year ago

you probably need to use ~/assets

GobsRuiz Over a year ago

Nothing yet guys :( The image path is right

kissu Over a year ago

Is vuetify properly installed ? Check it with a regular <img> tag.

|

Arthur Borba · Accepted Answer · 2021-04-01 19:24:38Z

0

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.

answered Apr 1, 2021 at 19:24

Arthur Borba

4715 silver badges20 bronze badges

Collectives™ on Stack Overflow

Using image props - vue

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related