Display images with v-for in Vue/Vuetify

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.

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 @

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