经常碰到这类场景，动态加载图片时，因为一些原因(图片链接不存在啊，图片误删啊，图片路径不对或图片路径为空等等)导致真实图片显示不出来。那么为了提高用户体验，都会显示一个默认图。
动态加载图片失败时，显示默认图的2种方案
查了一下img onerror文档和img onload文档，发现导致前端最终图片加载失败的情况会比较多，纯靠后端来解决很麻烦。而这两个方法从不同的方向都能解决无破裂图的效果。前者是从图片加载失败的角度入手，后者这是从加载完成(就是能正常加载)的角度入手。
1. 利用onerror方法更改img的src为默认图片路径。
示例代码：
优点：1、无需添加额外的标签；
缺点：1、默认图加载失败时，破裂图仍旧存在。2、统一网站不同尺寸比例的图片可能需要多个尺寸的默认图。
2. 利用onerror方法更改img的样式display:none;，让img标签本身不可见。
示例代码：
优点：1、完美解决无破裂图；2、多尺寸比例的图片时，可能一个默认图就可以
缺点：1、需添加额外的标签。
3. 利用onload方法更改img的样式display:inline-block;，让img标签显示(一开始隐藏img标签)。
示例代码：
优点：1、完美解决无破裂图；2、多尺寸比例的图片时，可能一个默认图就可以
缺点：1、需添加额外的标签。
个人推荐方案二和方案三。
ps：onerror方法里一般都会带this.onerror = null;，这是为了防止onerror方法造成的死循环导致内存溢出。假如正常图片加载失败，那么src会换成默认图的url，如果默认图也加载失败，又会加载默认图，一直循环下去。this.onerror = null;等于重置了onerror方法，从而达到只执行一次的目的。
测试的浏览器：IE9，IE10，edge，chrome83.0.4103.116，Firefox76.0.1，Opera68.0.3618.173，Safari13.1.1 (15609.2.9.1.2)。(其实方案二在最新浏览器版本基本都没破裂图了)
附上测试的效果图：
效果图.png
最后，附上以上方案的调试源码：
样图：
img-default.png
test.png
图片加载失败，去掉默认的破裂图
/* reset.css start*/
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 62.5%;
}
body {
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
font-size: 1.4rem;
line-height: 2.5rem;
color: #000;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
abbr, img, object, a img, :link img, :visited img, a object, :link object, :visited object {
border: 0;
}
address, caption, cite, code, dfn, em, th, var, i {
font-style: normal;
font-weight: normal;
}
/* reset.css end*/
/*develop css start*/
.container{
padding: 30px;
}
/*加载图片异常*/
.errorimg{
letter-spacing: -1em;
margin: 0 auto;
padding: 10px;
min-height: 120px;
}
.errorimg .item,
.errorimg img{
display: inline-block;
letter-spacing: normal;
margin: 10px;
width: 200px;
height: 120px;
border: 1px solid #a7a1a1;
overflow: hidden;
}
.errorimg2{
letter-spacing: -1em;
margin: 0 auto;
padding: 10px;
min-height: 120px;
}
.errorimg2 .img{
display: inline-block;
letter-spacing: normal;
margin: 10px;
width: 200px;
height: 120px;
border: 1px solid #a7a1a1;
overflow: hidden;
background: url("img/img-default.png") no-repeat center;
background-size: cover;
}
.errorimg2 .img img{
width: 200px;
height: 120px;
}
.errorimg2.type3 .img img{
display: none;
}
动态加载图片
分类
正常图片链接：img/test.png拿不到图片的链接：
img/test-no.png默认图片链接：
img/img-default.png拿不到默认图片的链接：
img/img-default-no.png
onerror加载默认图片方案
onerror隐藏img标签方案
onload显示加载完成的图片
$(function () {
function loadImgs() {
//动态加载图片(onerror加载默认图片方案)
var html = '';
html += '';
html += '';
html += '';
html += '';
$('#test').append(html);
//动态加载图片(onerror隐藏img标签方案)
var html2 = '';
html2 += '
';
html2 += '
';
html2 += '
';
html2 += '
';
$('#test2').append(html2);
//动态加载图片(onerror隐藏img标签方案,onload显示正常图片)
var html3 = '';
html3 += '
';
html3 += '
';
html3 += '
';
html3 += '
';
$('#test3').append(html3);
}
loadImgs();
});
