网站首页> 前端开发> Html/CSS> HTML中图片不存在显示默认图片的方法示例

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

时间:2020-10-18 17:07:13 阅读:9216次 来源:互联网

一个图片链接<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>

本文地址:https://www.manongw.com/article/52.html

文章来源:码农网

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了HTML中图片不存在显示默认图片的方法示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:07
  • 本文主要介绍了css3字体缩放样式-webkit-text-size-adjust的用法详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:46
  • 本文主要介绍了HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-19 21:50
  • 本文主要介绍了Html中使用自定义图片来实现checkbox显示的方法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:13
  • 本文主要介绍了HTML+CSS相对宽度和绝对宽度冲突时的div解决方法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-19 21:54
  • 本文主要介绍了text-size-adjust属性的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:41
  • 本文主要介绍了浏览器全屏显示背景图片的css样式与html结构的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:16
  • 本文主要介绍了display属性详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:48
  • 本文主要介绍了CSS3中::-moz-focus-inner用法详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:59
  • 本文主要介绍了详解css3 flex弹性盒自动铺满写法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-27 00:00