图片 img 标签加载失败显示默认图片，onerror 用法
现在很多人都是使用图床保存图片，但是因为图片地址不存在或者网络加载过慢后请求图片失败，会出现一个碎片图标，这就让用户非常不爽，这时就需要改变这个美观度。
借用 img 标签的 onerror 事件，img 标签支持 onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发 onerror 事件。可以使用一张提示错误的图片代替显示不了的图片。
基础
<img src="images/logo.png" onerror="this.src='images/error.png'">当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 error.png 图片。也就是说图片存在则显示 logo.png，图片不存在将显示 error.png。
但问题来了，如果 error.png 也不存在，则继续触发 onerror，导致循环，故会出现打开网页时提示 Stack overflow at line: 0错误。
特别说明：如果图片存在，但网络很不通畅，也可能触发 onerror。
进阶
- 控制它不循环，触发 onerror 后，onerror 事件设置为 null。
<img src="images/logo.png" onerror="this.src='images/error.png';this.onerror=null;">- 控制它不循环，触发 onerror 后函数调用。
<script>
function nofind() {
const img = event.srcElement;
img.src = "images/error.png";
img.onerror = null;
}
</script>
<img src="images/logo.png" οnerrοr="nofind();"/>高级
如果默认图片也加载失败，还是会出现一个碎片图标，或者调用图片API，失败还想调用其他图片API，这要怎么处理？
<script>
/**
* 图片出错处理，可以重加载指定的图片。超过重试次数仍不能正常显示的，显示缺省图片。
* @param imgObj :img节点对象
* @param imgSrc :出错时加载的图片地址
* @param maxErrorNum :最大出错次数，防止出现死循环
*/
function showImgDelay(imgObj, imgSrc, maxErrorNum) {
if (maxErrorNum > 0) {
imgObj.onerror = function () {
showImgDelay(imgObj, imgSrc, maxErrorNum - 1);
};
setTimeout(function () {
imgObj.src = imgSrc;
}, 500);
} else {
imgObj.onerror = null;
imgObj.src = "images/error.png";
}
}
</script>
<img onerror="showImgDelay(this,'images/logo2.png',2);" src="images/logo.png" alt=""/>error.png 不存在？
将 error.png 转为 BASE64，图片的 BASE64 编码就是可以将一幅图片数据编码成一串字符串，使用该字符串代替图片地址，从而不需要使用图片的 URL 地址。
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIEZvbnQgQXdlc29tZSBQcm8gNS4xNS40IGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIC0tPjxwYXRoIGQ9Ik01MDUgNDQyLjdMNDA1LjMgMzQzYy00LjUtNC41LTEwLjYtNy0xNy03SDM3MmMyNy42LTM1LjMgNDQtNzkuNyA0NC0xMjhDNDE2IDkzLjEgMzIyLjkgMCAyMDggMFMwIDkzLjEgMCAyMDhzOTMuMSAyMDggMjA4IDIwOGM0OC4zIDAgOTIuNy0xNi40IDEyOC00NHYxNi4zYzAgNi40IDIuNSAxMi41IDcgMTdsOTkuNyA5OS43YzkuNCA5LjQgMjQuNiA5LjQgMzMuOSAwbDI4LjMtMjguM2M5LjQtOS40IDkuNC0yNC42LjEtMzR6TTIwOCAzMzZjLTcwLjcgMC0xMjgtNTcuMi0xMjgtMTI4IDAtNzAuNyA1Ny4yLTEyOCAxMjgtMTI4IDcwLjcgMCAxMjggNTcuMiAxMjggMTI4IDAgNzAuNy01Ny4yIDEyOC0xMjggMTI4eiIvPjwvc3ZnPg==">扩展
- 隐藏加载失败的图片
<img src="images/logo.png" onerror="this.onerror=''; this.style.display='none'">- 图片默认隐藏，加载成功后显示。
<style>
/* 初始将图片隐藏 */
img {
display: none;
}
</style>
<img src="images/logo.png" onload="this.style.display='block'">
