时间戳

首页 > 解决方案 > Vue JS 数据绑定不适用于 img src

data-binding - Vue JS 数据绑定不适用于 img src

问题描述

我正在使用 vue 2 和 vue-cli 3。我正在尝试将标签的src绑定到数据中的变量。

具体来说，我正在执行以下操作：

<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">

export default {
   name: "home",
   components: {},  
   data() {
       return {
           locale: locale // 'en'
       };
   }
}

装订工作

使用 Chrome 开发人员工具并检查网络活动，我发现绑定有效：

http://localhost:8080/assets/time-comparison-en.png

但是找不到资源。

如果我在硬编码中删除数据绑定，则课程路径为：

<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">

Vue 解析资源链接以在以下位置查找图像：

http://localhost:8080/img/time-comparison-en.74a6f0ca.png

如何让 Vue 以正确解析绑定的方式进行数据绑定（即 time-comparison-en.74a6f0ca.png）。

谢谢！

标签： data-bindingvuejs2src

解决方案

请试试require

<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">

推荐阅读