我们浏览网页的时候，经常碰到图片加载失败的问题，例如图片链接不存在或网络加载不顺畅等原因，导致完整的图片无法显示出来。那么我们有什么办法来解决这个问题吗？
使用图片外链
我们在网站上使用图片的时候，为了快速网页的加载速度，在服务器带宽有限的情况下，一般不会使用本服务器上的图片，而会使用一些托管服务。例如，使用对象存储来放一些图片文件，或者使用一些图床服务。
但是如果遇到了一些网络错误，或者图片服务提供商的错误， 或者图片服务商更改了使用许可从而禁止图片外链等（例如 gitee），都会导致我们的图片挂掉。我们需要一些备份方法。
1.使用 onerror 双路方法
Mozilla 开发文档提到了一个 onerror 事件，当图片无法加载或者加载错误的时候就会被调用。那么我们就可以这样写：
<img src="a.jpg" onError="this.src='b.jpg'; this.onerror=null;" />
onerror 方法里一般都会带 this.onerror = null;，这是为了防止 onerror 方法造成的死循环导致内存溢出。假如正常图片加载失败，那么 src 会换成 onerror 默认的 url，如果 onerror 默认的 url 也加载失败，则又会加载它，从而死循环。添加 this.onerror = null; 就是为了达到只执行一次的目的。
onerror 方法的优点是无需添加额外的标签。而缺点是 onerror 默认的 url 加载失败时，破裂图仍旧存在。
2.拓展 onerror 思路
有时候，我们的图片加载过程受到网络不畅的影响，会导致图片撕裂，加载不完全等。我们可以利用 onerror 方法更改 img 的样式为 display:none;，让加载失败的 img 标签本身不可见。
<div id='test1'></div>
<script>
$(function () {
function loadImgs() {
var html1 = '';
html2 += '<div class="img"><img src="img/a.jpg" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
html2 += '<div class="img"><img src="img/b.jpg" alt="" onerror="this.onerror=\'\';this.style.display=\'none\'"></div>';
$('#test1').append(html1);
}
loadImgs();
});
</script>这样就解决了图片撕裂的问题，但是缺点也肯明显，需添加额外的标签，并需要 JavaScript 控制。
转换下思路，我们可以先让 img 不可见，再利用 onload 方法更改 img 的样式为 display:inline-block;，让加载成功的 img 标签显示。
<div class="type2" id='test2'></div>
<script>
$(function () {
function loadImgs() {
var html2 = '';
html3 += '<div class="img"><img src="img/a.jpg" alt="" onload="this.style.display=\'inline-block\'"></div>';
html3 += '<div class="img"><img src="img/b.jpg" alt="" onload="this.style.display=\'inline-block\'"></div>';
$('#test2').append(html2);
}
loadImgs();
});
</script>
