图片加载失败显示默认图片

情景分析：

有时候因为图片资源问题或网络问题导致图片加载不出来，原先位置就会出现一个碎片图标，这样会显得不太美观

解决思路：

利用img标签的onerror事件，img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片

 <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';"> 

代码分析：

javascript:this.src=　　　　固定内容

引号中写默认图片路径

ps：可能会出现的情况

如果默认图片也不存在或者是图片存在但网络条件不好，会继续触发onerror事件，这样就会陷入死循环

解决办法：

<script type="text/javascript">
    function imgerrorfun(){
        var img=event.srcElement;
        img.src="images/logoError.png";
        img.onerror=null; //控制不要一直跳动
    }
</script>

<img src="images/logo.png" onerror="imgerrorfun();" />

 

参考链接：https://www.cnblogs.com/willingtolove/p/9544576.html