在v-for循环中无法通过v-bind显示图像

编程问答 2022-06-10

问题描述

我知道关于如何在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开发人员工具，我可以确认数据已正确导入到技能数组中（但未显示）。

<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()（或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()至少需要文件路径的某些部分是完全静态的！

bindbindv-forvue.js