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

Question

我知道有很多关于如何使用v-for中的v-bind绑定到img src的问答...但是，我花了一整天的时间试验白费力气。对于重复的问题，我深表歉意，但有人可以帮助我吗？

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

感谢任何帮助，谢谢。

skills.json

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

Skills.vue

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

<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

Answer 1

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

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

替换

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

来自

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

TLDR

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

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

images can't be displayed with v-bind in v-for loop

bind

vue.js

v-for