使用 v-for - vuejs 绑定本地图像

Posted 2023-03-16

【中文标题】使用 v-for - vuejs 绑定本地图像

【英文标题】：Binding local image using 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 是什么？

【参考方案1】：

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

<img :src="property.imgSrc">