CODEWITHSUNDEEP
vue.jsvuetify.jsnuxt.jssrcv-for
Bryan Spearman
Bryan Spearman

Reputation: 51

Display images with v-for in Vue/Vuetify

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

Upvotes: 2

Views: 1828

Answers (3)

IronCross
IronCross

Reputation: 13

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

Upvotes: 0

jogarcia
jogarcia

Reputation: 2742

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 @

Upvotes: 1

Henrique Van Klaveren
Henrique Van Klaveren

Reputation: 1760

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.

Upvotes: 3

Related Questions