Display images with v-for in Vue/Vuetify

Question

I'm trying to display some images side by side in columns using this methodology:

<v-row>
  <v-col v-for="(n, i) in footerLogos" :key="i">
    <v-img :src="`${n}`"></v-img>
  </v-col>
</v-row>

The array:

footerLogos: [
        "@/assets/inc5000.jpg",
        "@/assets/inc-honor-roll.jpg",
        "@/assets/asa.jpg",
        "@/assets/soaringeagle.jpg",
        "@/assets/inahu.jpg",
        "@/assets/nahu-eagle.jpg",
        "@/assets/inc5000.jpg"
      ]

To me this SHOULD work but it doesn't. What am I missing? Or is there a better/simpler way to do it? I've tried a few variations such as the paths being "@assets/...." versus "@/assets/..." but nothing seems to work. Surely I'm missing something simple. Please help! :)

I'm using Vue, Vuetify and Nuxt

no, this should not work. Something like `:src="require('n')"` should. There are enough resources for this approach in internet — Serg, Mar 10 '20 at 18:59

score 3 · Answer 1 · answered Mar 10 '20 at 21:14

If you need import some image from your file system, first you need import this file with a require function. Please, take a look in the code below...

footerLogos: [
        require('~/assets/inc5000.jpg'),
        require('~/assets/inc-honor-roll.jpg'),
        require('~/assets//assets/asa.jpg'),
        require('~/assets/soaringeagle.jpg'),
        require('~/assets/inahu.jpg'),
        require('~/assets/nahu-eagle.jpg'),
        require('~/assets/inc5000.jpg')
      ]

However, if you will use a imagem from some URL, some thing like (https://example.com/img01.png) you don't need use require, just use a correctly path and this will work propertly.

jogarcia · Answer 2 · 2020-03-10T21:23:35.237

1

Try this code:

<v-row>
  <v-col v-for="(n, i) in footerLogos" :key="i">
    <v-img :src="require(`${n}`)"></v-img>
  </v-col>
</v-row>

footerLogos: [
        "./assets/inc5000.jpg",
        "./assets/inc-honor-roll.jpg",
        "./assets/asa.jpg",
        "./assets/soaringeagle.jpg",
        "./assets/inahu.jpg",
        "./assets/nahu-eagle.jpg",
        "./assets/inc5000.jpg"
      ]

Did'nt work for me with the @

edited Mar 10 '20 at 21:23

answered Mar 10 '20 at 19:17

jogarcia

2,327
2
19
34

@HenriqueVanKlaveren you are right, i fixed it, i added the require on the template. – jogarcia Mar 10 '20 at 21:27

score 0 · Answer 3 · answered Mar 18 '23 at 13:10

0

You can’t use require if you are using Vite

Someone else found this which worked for me

For the Vite environment, the solution is to use new URL('[path_to_image]', import.meta.url).href

See my answer here

answered Mar 18 '23 at 13:10

IronCross

13
3

Display images with v-for in Vue/Vuetify

3 Answers3