Question

我正在尝试使用这种方法在列中并排显示一些图像：

<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

Answer 1

如果需要从文件系统导入一些图像，首先需要使用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）之类的东西，只需使用正确的路径即可。

Answer 2

尝试以下代码：

<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"
      ]

不是通过@

为我工作

在Vue / Vuetify中使用v-for显示图像

2 个答案: