img标签的onerror事件

这篇具有很好参考价值的文章主要介绍了img标签的onerror事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,用户体验会下降。

通过百度,可以给img标签加背景图片,代码如下:

.headLogo img{
    display: block;
    width: 270px;
    height: 60px;
    background: url(../images/logo.png) no-repeat 0 0;
    margin: 25px 0;
 }

同时我们想去除载入图片失败时显示在左上角的碎片图标,这个要借用img标签的onerror事件和javascript,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下:

<img src="images/logo.png" οnerrοr="javascript:this.src='images/logoError.png';">

当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。
但问题来了,如果logoError.png 也不存在,则继续触发 onerror,导致循环,故会出现打开网页时提示 Stack overflow at line: 0错误。特别说明:如果图片存在,但网络很不通畅,也可能触发 onerror。

解决方法:
第一种:去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图片足够小,并且容易加载而存在。
第二种:控制它不循环,代码如下:文章来源地址https://www.toymoban.com/news/detail-581536.html

<script type="text/javascript">
	function nofind(){
		var img=event.srcElement;
		img.src="images/logoError.png";
		img.οnerrοr=null; 控制不要一直跳动
	}
</script>

<img src="images/logo.png" οnerrοr="nofind();" />

到了这里,关于img标签的onerror事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 图片引入---img标签

    img标签的作用是 :告诉浏览器我们需要显示一张照片, img标签运用的格式 : img  src=\\\"图片的路径\\\"  alt=\\\"对图片的解释说明\\\"/ 图片的来源路径有 两种:   1.本地图片:首先将图片添加至VScode文件中,然后根据图片的位置选择    ./ ( 当前文件路径)或者  ../ (上一级文件路

    2024年02月12日
    浏览(38)
  • Div标签里放img和span标签实现垂直水平居中

    正常默认布局 代码实现: 效果图如下:  我们首先 实现 span标签的文字在图片旁边垂直居中,这里有两种方法实现 方法一:在只考虑span文字在图片旁边垂直居中时推荐使用 给img和span标签的css样式都加上vertical-align: middle 代码实现: 效果图如下:   方法二:利用flex布局(

    2023年04月15日
    浏览(41)
  • 前端学习记录~2023.8.3~JavaScript重难点实例精讲~第5章 DOM与事件

    本章是第五章DOM与事件相关的内容。 DOM是文档对象模型,全称为Document Object Model。DOM用一个逻辑树来表示一个文档,树的每个分支终点都是一个节点,每个节点都包含着对象。DOM提供了对文档结构化的表述,通过绑定不同的事件可以改变文档的结构、样式和内容,从而能实现

    2024年02月12日
    浏览(49)
  • img标签src动态绑定资源失败问题

    需要采用require的方式进行 在 Vue 中, require 是一个通用的模块加载函数,用于在运行时(客户端或服务器端)引入模块。它通常用于加载 JavaScript 文件、JSON 数据、静态资源等。 组件使用:  组件代码: 此时就可以实现正常的访问指定路径下的静态资源了。 原先的时候直接

    2024年02月07日
    浏览(61)
  • HTML img标签识别base64图片格式

    红色框框为需要带上的格式,有这个格式img标签才能对base64进行解码,后面白色框框为base64编码 还有一些其他格式为: data:,文本数据 data:text/plain,文本数据 ;javascript:;,HTML代码 ;javascript:;;base64,base64编码的HTML代码 data:text/css,CSS代码 data:text/css;base64,base64编码的CSS代码 data:text/ja

    2024年02月16日
    浏览(42)
  • vue中如何动态配置img标签的src

    我遇到问题:        我在做项目的时候,要根据后台给我返回的天气数据,然后动态的显示天气的图片,比如后台给我返回的数据是“晴”,那么大屏就要显示晴的图片,如果,后台给我返回的数据是“阴”,那么我就需要在大屏上显示阴的图片,但是我在给src动态的设置

    2024年02月14日
    浏览(40)
  • 解决在vue中img标签不显示图片的问题

    在vue中, 经常会遇到img标签不展示的问题, 本人遇到两种, 都是因为webpack打包, 导致找不到路径, 所以不现实, 总结几个可以解决本地图片路径显示不出来的问题: 1.把图片放在src同级的static文件夹下。 2.把图片放在cdn上,把网络地址存在imgUrl里,然后直接去展示。 3.图片放在

    2024年02月13日
    浏览(39)
  • 4.正则提取html中的img标签的src内容

    我们以百度贴吧的1吧举例 目录 1  把网页搞下来 2  收集url 3  处理url 4  空的src 5  容错 6  不使用数字作为文件名 7  并不是所有的图片都用img标签表示 8  img标签中src请求下来不一定正确 9  分页   搞下来之后,双击打开是这样的 我们实际拿的就是 img标签中src的内

    2024年02月09日
    浏览(46)
  • 如何给img标签里的请求添加自定义header

              是这样的需求,有一个web页面,里面图片的上传和预览来自于一个独立的文件服务器,对http的请求需要进行访问权限的设置,就是在请求的header里加一个Authorization的字段。上传好说我用的Axios直接添加一个header就行了,但是预览就比较麻烦了,因为 img 这个标签

    2024年02月04日
    浏览(41)
  • canvas.createImage创建image对象后,img.onload事件不触发?

    微信版本8.0.34 第一次可以正常绘制,第二次onload事件就不触发了,onerror事件也不触发。两次绘制的图片url一样 解决办法:  这样可以避免浏览器缓存图片

    2024年02月08日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包