vue给img标签赋值src,vue动态绑定图片src
本文主要介绍vue如何动态绑定img的src属性(v-bind)，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
动态绑定img vue的src属性(v-bind)的解决方案添加img的src地址v-bind。
动态绑定img的src属性(v-bind)
今天遇到了一个特殊的问题。当img用于动态绑定页面中的图像路径时，它总是不显示。(处理前的代码)
div class=产品内容
div class= prod-item v-for=(item，index) in Merchant :key=index
img :src=item.imgUrl alt=
span{{item.name}}/span
/div
/div
商家：[
{imgur:././assets/image/Kaishu评书. png ，名称： Kaishu评书 }，
{imgur:././assets/image/樊登阅读. png ，名称：樊登阅读 }，
{imgur:././assets/image/qqmusic.png ，名称： qqmusic}，
{imgur:././assets/image/Didi Chuxing.png ，名称： Didi Chuxing}，
{imgur:././assets/image/wal-mart.png ，名称：沃尔玛 }，
{imgur:././assets/image/starbucks.png ，名称： starbucks}，
{imgur:././assets/image/爱奇艺. png ，名称：爱奇艺 }，
{imgur:././assets/image/Tencent video.png ，名称：腾讯视频 }，
{imgur:././assets/image/youku.png ，名称：优酷 }，
{imgur:././assets/image/Ctrip.png ，名称：携程 }，
],
解决办法
该链接需要由require包装。所以画面可以正常显示。(网络请求的数据应进行相应的处理)
***图片的路径不要出行中文，这里只是做演示
商家：[
{imgur: require(././assets/image/Kaishu评书. png )，名称： Kaishu评书 }，
{imgur: require(././assets/image/樊登阅读. png )，名称：樊登阅读 }，
{imgur: require(././assets/image/qqmusic.png )，名称： qqmusic}，
{imgur: require(././assets/image/Ctrip.png )，名称：携程 }，
{imgur: require(././assets/image/Didi Chuxing.png )，名称： Didi Chuxing}，
{imgur: require(././assets/image/wal-mart.png )，名称：沃尔玛 }，
{imgur: require(././assets/image/starbucks.png )，名称：星巴克 }，
{imgur: require(././assets/image/爱奇艺. png )，名称：爱奇艺 }，
{imgur: require(././assets/image/Tencent video.png )，名称：腾讯视频 }，
{imgur: require(././assets/image/youku.png )，名称：优酷 }，
],
vue添加img的src地址 v-bind
Vue使用{{ a }}来获取数据。
但是它不在img标签的src中解析。
根据上述用法
Html部分
div id=test2
img src={{ url }} alt=
/div
Js零件
const vm1=新Vue({
埃尔： #test2 ，
数据：{
url: a.jpg ，
}
})
在这种情况下，控制台将报告错误，并且不会解析img地址。
的正确用法受v-bind约束。
div id=test2
img v-bind:src=url alt=
/div
完成后，url将被解析。
如果标签里有很多属性，v-bind需要写很多，看起来会很乱。
Vu还提供了一种简写方式，即在属性前面加一个冒号，例如：src=url ，也可以解决上述问题。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。