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

【问题标题】：Display images with v-for in Vue/Vuetify在 Vue/Vuetify 中使用 v-for 显示图像
【发布时间】：2020-06-22 17:39:07
【问题描述】：

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

<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

【问题讨论】：

不，这应该行不通。像:src="require('n')" 这样的东西应该。互联网上有足够的资源用于这种方法

标签： vue.js vuetify.js nuxt.js src v-for

【解决方案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，只需使用正确的路径，这将正常工作。

【讨论】：

【解决方案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"
      ]

@@ 对我不起作用

【讨论】：

@HenriqueVanKlaveren 你是对的，我修复了它，我在模板上添加了需求。