經(jīng)常碰到這類場景，動態(tài)加載圖片時，因為一些原因（圖片鏈接不存在啊，圖片誤刪啊，圖片路徑不對或圖片路徑為空等等）導(dǎo)致真實圖片顯示不出來。那么為了提高用戶體驗，都會顯示一個默認(rèn)圖。
動態(tài)加載圖片失敗時，顯示默認(rèn)圖的2種方案
查了一下img onerror文檔和img onload文檔，發(fā)現(xiàn)導(dǎo)致前端最終圖片加載失敗的情況會比較多，純靠后端來解決很麻煩。而這兩個方法從不同的方向都能解決無破裂圖的效果。前者是從圖片加載失敗的角度入手，后者這是從加載完成（就是能正常加載）的角度入手。
1. 利用onerror方法更改img的src為默認(rèn)圖片路徑。
示例代碼：
<img src="img/test.png" alt="" onerror="this.src= 'img/img-default.png'; this.onerror = null;">
優(yōu)點：1、無需添加額外的標(biāo)簽；
缺點：1、默認(rèn)圖加載失敗時，破裂圖仍舊存在。2、統(tǒng)一網(wǎng)站不同尺寸比例的圖片可能需要多個尺寸的默認(rèn)圖。
2. 利用onerror方法更改img的樣式display:none;，讓img標(biāo)簽本身不可見。
示例代碼：
<div class="img"><img src="img/test.png" alt="" onerror="this.onerror='';this.style.display='none'"></div>
優(yōu)點：1、完美解決無破裂圖；2、多尺寸比例的圖片時，可能一個默認(rèn)圖就可以
缺點：1、需添加額外的標(biāo)簽。
3. 利用onload方法更改img的樣式display:inline-block;，讓img標(biāo)簽顯示（一開始隱藏img標(biāo)簽）。
示例代碼：
<div class="img"><img src="img/test.png" alt="" onload="this.style.display='inline-block'"></div>
優(yōu)點：1、完美解決無破裂圖；2、多尺寸比例的圖片時，可能一個默認(rèn)圖就可以
缺點：1、需添加額外的標(biāo)簽。
個人推薦方案二和方案三。
ps：onerror方法里一般都會帶this.onerror = null;，這是為了防止onerror方法造成的死循環(huán)導(dǎo)致內(nèi)存溢出。假如正常圖片加載失敗，那么src會換成默認(rèn)圖的url，如果默認(rèn)圖也加載失敗，又會加載默認(rèn)圖，一直循環(huán)下去。this.onerror = null;等于重置了onerror方法，從而達(dá)到只執(zhí)行一次的目的。
測試的瀏覽器：IE9，IE10，edge，chrome83.0.4103.116，F(xiàn)irefox76.0.1，Opera68.0.3618.173，Safari13.1.1 (15609.2.9.1.2)。（其實方案二在最新瀏覽器版本基本都沒破裂圖了）
附上測試的效果圖：
最后，附上以上方案的調(diào)試源碼：
樣圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>圖片加載失敗，去掉默認(rèn)的破裂圖</title>
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- // <script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script> -->
<!-- // <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script> -->
<style type="text/css">
/* 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;
}
</style>
</head>
<body>
<div class="container">
<h2>動態(tài)加載圖片</h2>
<h3>分類</h3>
<div class="errorimg">
<div class="item">正常圖片鏈接：<br>img/test.png</div>
<div class="item">拿不到圖片的鏈接：<br>img/test-no.png</div>
<div class="item">默認(rèn)圖片鏈接：<br>img/img-default.png</div>
<div class="item">拿不到默認(rèn)圖片的鏈接：<br>img/img-default-no.png</div>
</div>
<h3>onerror加載默認(rèn)圖片方案</h3>
<div class="errorimg" id='test'></div>
<h3>onerror隱藏img標(biāo)簽方案</h3>
<div class="errorimg2" id='test2'></div>
<h3>onload顯示加載完成的圖片</h3>
<div class="errorimg2 type3" id='test3'></div>
</div>
<script>
$(function () {
function loadImgs() {
//動態(tài)加載圖片(onerror加載默認(rèn)圖片方案)
var html = '';
html += '<img src="img/test.png" alt="" onerror="this.src= \'img/img-default.png\'; this.onerror = null;">';
html += '<img src="img/test-no.png" alt="" onerror="this.src= \'img/img-default.png\'; this.onerror = null;">';
html += '<img src="" alt="" onerror="this.src= \'img/img-default.png\'; this.onerror = null;">';
html += '<img src="" alt="" onerror="this.src= \'img/img-default-no.png\'; this.onerror = null;">';
$('#test').append(html);
//動態(tài)加載圖片(onerror隱藏img標(biāo)簽方案)
var html2 = '';
html2 += '<div class="img"><img src="img/test.png" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
html2 += '<div class="img"><img src="img/test-no.png" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
html2 += '<div class="img"><img src="" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
html2 += '<div class="img"><img src="img/img-default-no.png" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
$('#test2').append(html2);
//動態(tài)加載圖片(onerror隱藏img標(biāo)簽方案,onload顯示正常圖片)
var html3 = '';
html3 += '<div class="img"><img src="img/test.png" alt="" onload="this.style.display=\'inline-block\'"></div>';
html3 += '<div class="img"><img src="img/test-no.png" alt="" onload="this.style.display=\'inline-block\'"></div>';
html3 += '<div class="img"><img src="" alt="" onload="this.style.display=\'inline-block\'"></div>';
html3 += '<div class="img"><img src="img/img-default-no.png" alt="" onload="this.style.display=\'inline-block\'"></div>';
$('#test3').append(html3);
}
loadImgs();
});
</script>
</body>
</html>
