Vue JS data binding not working for img src

ぐ巨炮叔叔 提交于 2020-12-05 12:10:39

问题


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!


回答1:


Please try require

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


来源:https://stackoverflow.com/questions/55152795/vue-js-data-binding-not-working-for-img-src

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!