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

Question

我正在使用 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 开发人员工具并检查网络 activity 我发现绑定有效：

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

但是找不到资源。

如果我删除数据绑定硬编码课程路径到：

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

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

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

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

谢谢！

Answer 1

请尝试require

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

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

Vue JS data binding not working for img src

data-binding

src

vuejs2