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

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 )，则不需要使用 require，只需使用正确的路径即可正常工作。