Vue JS 数据绑定不适用于 img src [英] Vue JS data binding not working for img src
问题描述
我正在使用 vue 2 和 vue-cli 3.我试图将标签的 src 绑定到数据中的变量.
具体来说,我正在执行以下操作:
<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">导出默认{名称:家",组件: {},数据() {返回 {语言环境:语言环境//'en'};}}
绑定有效
使用 Chrome 开发者工具并检查网络活动,我发现绑定有效:
如何让 Vue 以正确解析绑定的方式进行数据绑定(即 time-comparison-en.74a6f0ca.png).
谢谢!
请试试require
<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">
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'
};
}
}
The binding works
Using Chrome developer tools and examining the network activity I see that the binding works:
http://localhost:8080/assets/time-comparison-en.png
However the resource is not found.
If I remove data binding at hard code the course path to:
<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">
Vue resolves the resource link to look for the image at:
http://localhost:8080/img/time-comparison-en.74a6f0ca.png
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).
Thanks!
Please try require
<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">
这篇关于Vue JS 数据绑定不适用于 img src的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!