处理img标签加载图片失败,显示默认图片简单代码分享

常规方法解决我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。
例如这样使用:

 src="images/logo.png" onerror="javascript:this.src='https://www.yuanmacun.com/zb_users/upload/2021/07/20210704190716_88647.png';">
当图片不存在时,将触发 onerror,而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。

但是,注意哦,这里有个大坑哦,如果logoError.png 也不存在,则会继续触发 onerror,导致死循环,页面卡死。而且,就算图片存在,但网络很不通畅,也可能触发 onerror。

当然,解决办法是有的,代码如下:
 src="images/logo.png" onerror="slnotimg();"/>  type="text/javascript"> function slnotimg() { var img = event.srcElement; img.src = "https://www.yuanmacun.com/zb_users/upload/2021/07/20210704190716_88647.png"; img.onerror = null; //解绑onerror事件 } 

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » 处理img标签加载图片失败,显示默认图片简单代码分享
您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论