Vue JS数据绑定不适用于img src [英] Vue JS data binding not working for img src
问题描述
我正在使用vue 2和vue-cli3.我正在尝试将标签的 src 绑定到数据中的变量.
I am using vue 2 and vue-cli 3. I am trying to bind the src of an tag to a variable in data.
具体地说,我正在执行以下操作:
Specifically I am doing the following:
<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">
export default {
name: "home",
components: {},
data() {
return {
locale: locale // 'en'
};
}
}
绑定有效
使用Chrome开发人员工具并检查网络活动,我发现绑定有效:
Using Chrome developer tools and examining the network activity I see that the binding works:
http://localhost:8080/assets/time-comparison-en.png
但是找不到资源.
如果我删除硬编码中的数据绑定,则课程路径为:
If I remove data binding at hard code the course path to:
<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">
Vue解析资源链接以在以下位置查找图像:
Vue resolves the resource link to look for the image at:
http://localhost:8080/img/time-comparison-en.74a6f0ca.png
如何以正确解析绑定的方式(即time-comparison-en.74a6f0ca.png)获取Vue数据绑定.
How do I get the Vue to data bind in such a way that it resolves the binding correctly (i.e. time-comparison-en.74a6f0ca.png).
谢谢!
推荐答案
请尝试要求
<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">
这篇关于Vue JS数据绑定不适用于img src的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!