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, Apr 01 '21 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, Apr 01 '21 at 12:08
@Terry based on how it works essentially, but this is a good source to corroborate my tellings: https://stackoverflow.com/a/44531545/8816585 — kissu, Apr 01 '21 at 12:12
please share your folder structure (where the componet is related to the images) — Arthur Borba, Apr 01 '21 at 19:00

score 3 · Answer 1 · answered Apr 01 '21 at 12:04

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 01 '21 at 12:04

Swapnil Soni

965
1
10
26

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 – GobsRuiz Apr 01 '21 at 12:13
@VitorLucenti is your path correct ? Try to display one (just grab the first index) before trying to loop on the array. `` – kissu Apr 01 '21 at 12:17
1

you probably need to use `~/assets` – Swapnil Soni Apr 01 '21 at 12:20
Nothing yet guys :( The image path is right – GobsRuiz Apr 01 '21 at 12:40
Is vuetify properly installed ? Check it with a regular `` tag. – kissu Apr 01 '21 at 12:45
I put the img tag and also nothing. Vuetify is installed correctly yes, i am using it now – GobsRuiz Apr 01 '21 at 13:08
`img` tag should be working, at least. Post some images of your project tree (edit your question), probably the path. – kissu Apr 01 '21 at 13:13

score 0 · Answer 2 · answered Apr 01 '21 at 19:24

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.

Using image props - vue

2 Answers2