vue img动态路径,vue中img

　　本文主要介绍vue如何动态赋值给img，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 vue动态地给img赋值。1.如果直接将一个字符串绑定到img的src。2.Solution vue动态分配img的src，只需使用require()和require()

vue动态给img赋值

1.如果直接给img的src绑定一个字符串

　　img :src=nowIcon /

　　data () {

　　返回{

　　nowIcon:“”

　　}

　　},

　　This.nowIcon=./assets/64/图像名称。巴布亚新几内亚

　　Vue会把这个路径当作一个字符串，不会编译这个图像路径，所以图像无法显示。

　　此时，的路径尚未编译，代码为：

　　img src=./assets/64/100.png /

2.解决办法

　　This.nowIcon=./assets/64/图像名称。巴布亚新几内亚

　　代替

　　This.nowicon=require(./assets/64/图像名称。png’)

　　此时，的代码是正常编译的路径，图片正常显示。

　　img src=/img/101.ce5f2cfc.png

vue动态赋值img的src,用require()

　　首先，单个src是可能的。

　　Img=././assets/logo . png alt= picture /

　　这个数组看起来像这样。

　　如果想改成动态赋值的形式，是无法实现的。

　　img:src= item . img alt= picture /

　　因此，将其更改为以下内容：

　　在webpack中，图片将被用作一个模块。因为它是动态加载的，url加载程序将不能解析图片地址并将图片作为模块加载。

用require()就可以了

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。