在 v-for 循环中使用 v-bind 无法显示图像答案

【问题标题】：images can't be displayed with v-bind in v-for loop在 v-for 循环中使用 v-bind 无法显示图像
【发布时间】：2021-01-20 07:01:30
【问题描述】：

我知道有很多关于如何在 v-for 中使用 v-bind 来绑定到 img src 的问题和答案......但是，我花了一整天的时间进行实验，但徒劳无功。对于重复的问题，我深表歉意，但有人可以帮助我吗？

我正在使用 vue@2.6.12 和 @vue/cli 4.5.6。我试图在 v-for 循环中显示多个图像，将文件路径绑定到 img src。我在 Skills.json 中有技能数据，试图在 Skills.vue 中显示它们。下面的代码只是显示空白屏幕。

感谢您的帮助，谢谢。

技能.json

[
  {
    "id": 1,
    "name": "C#",
    "logo": "C-Sharp.svg"
  },
  {
    "id": 2,
    "name": "Azure",
    "logo": "azure.svg"
  }
]

技能.vue

查看 vue 开发者工具，我可以确认数据已正确导入技能数组（但未显示）。

<template>
  <div class="container">
    <div class="items">
      <div class="item" v-for="skill in skills" :key="skill.id">
        <img :src="require(`${logoPath}${skill.logo}`)" />
      </div>
    </div>
  </div>
</template>

<script>
import skillsJson from '../assets/skills.json';

export default {
    data() {
        return {
            skills: skillsJson,
            logoPath: '../assets/img/',
        };
    },
};
</script>

src 文件夹结构

C:.
│  App.vue
│  main.js
├─assets
│  │  skills.json
│  ├─icons
│  ├─img
│  │      azure.svg
│  │      C-Sharp.svg
│  └─scss
├─components
├─router
│      index.js
└─views
        Experience.vue
        HelloWorld.vue
        Home.vue
        Skills.vue

【问题讨论】：

require() 是为了什么？？你试过:src="logoPath + '/' + skill.logo"
嗨，Ifaruki。感谢您的评论。前任根据下面的链接，如果使用 webpack，则需要 require 。 stackoverflow.com/questions/55152795/… 我刚刚输入了“vue create {projectname}”，所以我假设 webpack 用于我的项目。我试过你的来源，现在它显示的图像带有损坏的链接图标。

标签： vue.js bind v-for

【解决方案1】：

您需要了解require()（或import()）是由Webpack 在构建时处理的。 Webpack 无法执行您的代码（在构建时），并且可能知道运行时的值是什么。看看docs（大概是import()，但require()is almost same）

简单的解决方法是只使路径的一部分动态化，这样 Webpack 至少会得到一些提示应该使哪些文件可用...

替换

<img :src="require(`${logoPath}${skill.logo}`)" />

通过

<img :src="require(`../assets/img/${skill.logo}`)" />

TLDR

Webpack 的 require() 至少需要文件路径的某些部分是完全静态的！

【讨论】：

您好征费，感谢您的评论。它现在正在工作！根据文档，我认为这是导致问题的原因......“不可能使用完全动态的导入语句，例如 import(foo)。因为 foo 可能是系统或项目中任何文件的任何路径. import() 必须至少包含一些关于模块所在位置的信息。”需要了解 Webpack 的工作原理...感谢您的帮助。