图片 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。

进阶

  1. 控制它不循环,触发 onerror 后,onerror 事件设置为 null。
<img src="images/logo.png" onerror="this.src='images/error.png';this.onerror=null;">
  1. 控制它不循环,触发 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==">

扩展

  1. 隐藏加载失败的图片
<img src="images/logo.png" onerror="this.onerror=''; this.style.display='none'">
  1. 图片默认隐藏,加载成功后显示。
<style>
    /* 初始将图片隐藏 */
    img {
        display: none;
    }
</style>

<img src="images/logo.png" onload="this.style.display='block'">

本文标签: 图片优化

版权声明:若无特殊注明,本文皆为《Dice》原创,转载请保留文章出处。

本文链接:图片 img 标签加载失败显示默认图片,onerror 用法 - https://www.52linglong.com/skill/80.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注