Vue JS数据绑定不适用于img src [英] Vue JS data binding not working for img src

查看:51
本文介绍了Vue JS数据绑定不适用于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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆