问题:

在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示,但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示,控制台也不报错
html代码:

            <img :src="MyimgSrc" alt="">

js代码:

          this.MyimgSrc = '../../assets/jd/market/img/temp/icon_yj.png'

但是浏览器不报错,而且f12查看元素的时候
在这里插入图片描述
说明已经渲染到了html的img的src上了,但是不显示在页面上

解决方法:

当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引入才能成功

 this. MyimgSrc = require('../../assets/jd/market/img/temp/icon_yj.png')

这样就能显示了:
在这里插入图片描述

总结:

当动态绑定img的src的时候,vue数据绑定图片的相对路径或者是绝对路径的时候,需要require路径

Logo

前往低代码交流专区

更多推荐