情景：

　　1.当在页面中显示的图片不存在

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

　　2.图片存在但由于网络问题导致无法正常显示图片

问题：当图片无法正常显示的时候会在图片的位置显示破碎的图标不美观也不友好

方法：可以借助于img标签的onerror事件做一些处理用默认的图片替换破碎的图标

<img src="xxx.png" onerror="javascript:this.src='static/images/default.png';">

理想情景：当xxx.png找不到时会触发onerror事件并且将src指向的图片，并正常显示

不理想：本地的图片也加载有问题，此时会不断的触发onerror事件，导致死循环，故此方式有风险不推荐

<script type="text/javascript"> 
     function errorEvent(dom){ 
        dom.src = "static/images/default.png"; 
        dom.onerror = null; //避免死循环
     } 
</script> 
 
<img src="xxx.png" onerror="errorEvent(this)" />

 

如有不严谨和错误地方请希望指正，祝大家工作顺利 ！

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