首页前端开发HTMLHTML中图片不存在显示默认图片的方法示例

HTML中图片不存在显示默认图片的方法示例

时间2024-01-27 17:13:03发布访客分类HTML浏览194
导读:收集整理的这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例,觉得挺不错的,现在分享给大家,也给大家做个参考。 一个图片链接<img src="" /> 想用js 判断url是否有效如果404 就加载默认的图...
收集整理的这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例,觉得挺不错的,现在分享给大家,也给大家做个参考。

一个图片链接img src="" /> 想用js 判断url是否有效如果404 就加载默认的图片路径

img src="xxx" οnerrοr="this.src=默认图地址"/>
    

图片标签img的 onerror事件

img src="pic.gif" οnerrοr="javascript:this.src='默认图地址';
    " alt="pic" />
    

分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中为 img 指定一个默认图片。也就是说图片存在则显示 pic.gif,图片不存在将显示默认图片。

存在的问题:如果默认图片也不存在,则继续触发 onerror,导致循环,故出现错误。如果图片存在,但网络很不通畅,也可能触发 onerror。

解决方法:通过函数加载默认图片,仅加载一次

img src="abc.jpg" onerror="nofind()" />
    script tyPE="text/javascript">
function nofind(){
      VAR img=event.srcElement;
      img.src="http://mat1.gtimg.COM/cd/2017/home/nLOGo0518.png";
     //替换的图片  img.onerror=null;
 //控制不要一直触发错误}
    /script>
    

到此这篇关于HTML中图片不存在显示默认图片的方法示例的文章就介绍到这了,更多相关HTML图片不存在显示默认内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

HTML

若转载请注明出处: HTML中图片不存在显示默认图片的方法示例
本文地址: https://pptw.com/jishu/588485.html
html实现a元素href的URL链接自动刷新或新窗口打开功能 HTML Table 空白单元格补全的实现方法

游客 回复需填写必要信息