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

Question

我正在使用vue 2和vue-cli3。我正在尝试将标记的 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

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

谢谢！

Answer 1

请尝试require

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