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

【问题标题】：Vue JS data binding not working for img srcVue JS 数据绑定不适用于 img src
【发布时间】：2019-08-04 18:34:22
【问题描述】：

我正在使用 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）。

谢谢！

【问题讨论】：

你在使用哪些 webpack 插件/加载器？

标签： data-binding vuejs2 src

【解决方案1】：

请尝试require

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

【讨论】：

感谢 ittus，非常感谢。我花了一些时间来解决这个问题。我在其他地方看到了这个解决方案，但无法让它发挥作用。我误用了 require 函数，如下所示： ../assets/time-comparison-${locale}.png")> 我一直收到语法错误。要求功能需要进入“。再次感谢。