vue怎么动态绑定img的src属性

本篇内容主要讲解"vue怎么动态绑定img的src属性"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue怎么动态绑定img的src属性"吧!

动态绑定img的src属性(v-bind)

今天遇到一个特别坑爹问题，页面中使用img动态绑定图片路径时总是不显示。(处理前的代码)

  
        {{item.name}}  

Merchant:[    {imgUrl:'../../assets/image/凯叔讲故事.png',name:'凯叔讲故事'},    {imgUrl:'../../assets/image/樊登读书.png',name:'樊登读书'},    {imgUrl:'../../assets/image/QQ音乐.png',name:'QQ音乐'},    {imgUrl:'../../assets/image/滴滴出行.png',name:'滴滴出行 '},    {imgUrl:'../../assets/image/沃尔玛.png',name:'沃尔玛'},    {imgUrl:'../../assets/image/星巴克.png',name:'星巴克'},    {imgUrl:'../../assets/image/爱奇艺.png',name:'爱奇艺'},    {imgUrl:'../../assets/image/腾讯视频.png',name:'腾讯视频'},    {imgUrl:'../../assets/image/优酷.png',name:'优酷'},    {imgUrl:'../../assets/image/携程.png',name:'携程'},  ],

解决办法

图片链接是需要通过 require包裹。这样图片就可以正常显示啦。(网络请求的数据应该做相应的处理)

*** 图片的路径不要出行中文，这里只是做演示

Merchant:[  {imgUrl:require('../../assets/image/凯叔讲故事.png'),name:'凯叔讲故事'},  {imgUrl:require("../../assets/image/樊登读书.png"),name:'樊登读书'},  {imgUrl:require("../../assets/image/QQ音乐.png"),name:'QQ音乐'},  {imgUrl:require("../../assets/image/携程.png"),name:'携程'},  {imgUrl:require("../../assets/image/滴滴出行.png"),name:'滴滴出行'},  {imgUrl:require("../../assets/image/沃尔玛.png"),name:'沃尔玛'},  {imgUrl:require("../../assets/image/星巴克.png"),name:'星巴克'},  {imgUrl:require("../../assets/image/爱奇艺.png"),name:'爱奇艺'},  {imgUrl:require("../../assets/image/腾讯视频.png"),name:'腾讯视频'},  {imgUrl:require("../../assets/image/优酷.png"),name:'优酷'},],

vue添加img的src地址 v-bind

vue获取数据用{{ a }}

但是放在img标签的src里面不被解析

按照上述用法

html部分

js部分

 const vm1 = new Vue({            el: '#test2',            data: {                url: "a.jpg",            }        })

这样的话 控制台会报错 img的地址不会被解析

正确的用法 通过v-bind进行绑定

这样在进行输出的时候，就会解析url

如果标签内有很多属性的话，v-bind就需要写很多，看起来就会显得非常乱

vue还提供了一个简写，就是在属性前面加个 冒号 ，例如 ：src='url' ,同样可以解决上面的问题

到此，相信大家对"vue怎么动态绑定img的src属性"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！