我正在尝试使用这种方法在列中并排显示一些图像:
<v-row>
<v-col v-for="(n, i) in footerLogos" :key="i">
<v-img :src="`${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"
]
对我来说,这应该有效,但事实并非如此。我错过了什么?或者有更好/更简单的方法吗? 我尝试了一些变体,例如路径是“@assets/....”与“@/assets/...”,但似乎没有任何效果。当然我错过了一些简单的东西。请帮忙! :)
我正在使用 Vue、Vuetify 和 Nuxt
如果你需要从你的文件系统中导入一些图像,首先你需要使用 require 函数导入这个文件。 请看下面的代码...
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')
]
但是,如果您要使用某个 URL 中的图像,例如 (https://example.com/img01.png),则不需要使用 require,只需使用正确的路径即可正常工作。
试试这个代码:
<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"
]
@
对我不起作用使用 Vite 就不能使用 require
别人发现这个对我有用
对于Vite环境,解决方法是使用new URL('[path_to_image]', import.meta.url).href
看我的答案在这里