【问题标题】：Binding local image using v-for - vuejs使用 v-for - vuejs 绑定本地图像
【发布时间】：2021-07-19 03:18:03
【问题描述】：

什么问题

我想使用链接，它来自 v-for 作为 src 到我的图像。问题是，当我使用 require 通过它时，它告诉我它无法在给定位置找到图像。这尤其令人困惑，因为此链接在 img 标记中完美运行。

代码

<section class="DataContainer" v-for="property in state.properitesToShow" :key="property">
   <section>
     {{property.name}}
     <img src="../assets/icons/virus2.svg"> // this works
     <img :src="require(property.imgSrc)"> // this not
    </section>
</section>

提及列表

const state = reactive({
      properitesToShow: [
        {name: 'TotalConfirmed', imgSrc: '../assets/icons/virus2.svg'},
        {name: 'NewDeaths', imgSrc: '../assets/icons/death.svg'},
        ]
    })

感谢您的帮助！

【问题讨论】：

能否请您测试一下：{name: 'TotalConfirmed', imgSrc: require('../assets/icons/virus2.svg')} 并在您的src 中调用imgSrc 表示:src="property.imgSrc"
这里的require 是什么？

标签： javascript vue.js vuejs3

【解决方案1】：

在循环中的当前property-object中访问imgSrc：

<img :src="property.imgSrc">

【讨论】：