最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑。

Vue中:img的src属性是动态渲染时
不显示问题
1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片。

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

如图:

当Vue中img的src是动态渲染时不显示问题 随笔 第1张

 

2.第一次写:

如图:

当Vue中img的src是动态渲染时不显示问题 随笔 第2张

 

3.结果(汗。。。)并没有显示默认图片来代替:

审查元素发现没显示默认的图片,图片没有被打包。。。。

如图:

当Vue中img的src是动态渲染时不显示问题 随笔 第3张

 

4.解决方案:

1、使用require引入图片

当Vue中img的src是动态渲染时不显示问题 随笔 第4张

2、使用img的onerror属性

当Vue中img的src是动态渲染时不显示问题 随笔 第5张

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄