IMG的onerror事件

最新推荐文章于 2024-10-23 11:53:33 发布
转载 最新推荐文章于 2024-10-23 11:53:33 发布 · 947 阅读 · 0
文章标签：

#服务器

本文介绍了一种在Kycms系统中处理图片样式调用错误的方法，通过使用IMG的onerror事件来确保在服务器上的指定图片不存在时能够显示备用图片。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 
有时候在用kycms的时候,可能会把一些没有图片的内容也用图片样式调用出来了,这个时候可能前台界面就会显示一个XX .那我们就要用到 IMG的onerror事件 了.


< img src="http://www.kycms.com/upload/movie/2007.gif" onerror="this.src='http://www.kycms.com/upload/error.gif'" />

如果服务器里存在2007.gif 则显示它,如果不存在,这显示error.gif
cmtony2008
关注
img标签的onerror事件有什么作用？
王铁柱666的博客
01-17 405
事件，你可以指定一个备用的行为或者图像，以提供更好的用户体验。例如，你可以设置一个默认的图像来替代那些无法加载的图像，或者显示一个错误消息。在这个例子中，如果 “image.jpg” 无法加载，那么浏览器会尝试加载 “backup-image.jpg” 作为替代。当浏览器尝试加载图像但失败时（例如，由于图像不存在、服务器错误、网络问题、跨域问题、或者图像格式不支持等原因），除了设置备用图像，你也可以使用 JavaScript 函数来处理。事件，例如记录错误、显示错误消息等。事件在 HTML 的。
img标签的onerror事件
weixin_40719714的博客
10-17 2036
有时，img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。 通过百度，可以给img标签加背景图片，代码如下： .headLogo img{ display: block; width: 270px; height: 60px; background: url(../images/logo.png) no-repeat 0 ...
img onerror事件
lamp专栏
07-15 2699
如果一个图片加载错误，各浏览器都有自己的解决之道，但是各不相同。比如说firefox会友好的显示img alt属性的内容。但是ie就不同，他会显示一个红色的xx。这样人一看就很反感。如果自己可以控制图片加载出错时的显示方式就可以了。img 元素的onerror事件可以很好的解决此问题。这事件还跨浏览器，当加载src指定的图片出错时就会执行此事件。所以我们可以在 onerror事件的处理一下 function imgCorrent(obj) { obj.src = "error.gif"; }
img的onerror事件
weixin_33815613的博客
05-06 190
情景： 　　1.当在页面中显示的图片不存在 　　2.图片存在但由于网络问题导致无法正常显示图片 问题：当图片无法正常显示的时候会在图片的位置显示破碎的图标不美观也不友好 方法：可以借助于img标签的onerror事件做一些处理用默认的图片替换破碎的图标 <img src="xxx.png" onerror="javascript:this.src='static/images/...
vue项目-img 标签的 error 事件
最新发布
nunumaymax的博客
10-23 586
在做vue项目的时候，对img的src动态赋值后，还需要监听下 img 标签的 error 事件，如果这个图片不存在的场景下，需要设置为默认的。
js注意img图片的onerror事件的分析
10-28
在JavaScript中处理img元素加载图片时，onerror事件是一个非常重要的错误处理机制，它在图片加载失败时触发。然而，如果不正确地使用onerror事件处理器，可能会导致程序行为不正确，甚至出现栈溢出（Stack overflow...
解析img图片没找到onerror事件 Stack overflow at line: 0
09-04
然而，当图片无法加载或找不到时，浏览器会触发 `onerror` 事件。这个事件允许开发者定义当图片加载失败时执行的备用操作。在本文中，我们将深入探讨 `onerror` 事件，以及如何处理图片未找到导致的 "Stack overflow...
img标签中onerror用法
09-05
在这个例子中，`img1`是主图片，如果加载失败，`onerror`事件会让它隐藏，并显示`img2`。确保`img2`的源是可靠的，或者是一个备用的占位符图片，以防万一`img1`的替换策略也失败。 这种方法的一个关键点是，确保`on...
JS对img标签进行优化使用onerror显示默认图像
10-26
在本文中，将详细讲解如何使用JavaScript中的onerror事件为img标签设置默认图像，以解决图片加载失败的问题。通过编写相应的JS函数，可以确保在图片加载失败时，自动显示一张预设的默认图片，从而避免用户面对空白或...
JavaScript中的onerror事件概述及使用
10-27
1. **Window.onerror事件** `Window.onerror`事件是全局的，它会在整个页面上捕获任何未被捕获的JavaScript错误。当在JavaScript代码中出现语法错误、引用错误或其他类型的运行时错误时，浏览器会尝试在`window`...
vue中img标签onerror事件
qq_43203949的博客
02-21 1万+
vue中img标签onerror事件 使用:onerror去绑定事件 该方法能正确处理onerror事件，并防止闪图 <img type="image/x-icon" :src="item.icon?item.icon:''" :onerror="imgOnError" /> //图片损毁时触发 imgOnError(e){ let img = e.srcElement; img.src = this.errorImg; img.oner
img标签的onerror事件（应用以及注意事项）
weixin_42508745的博客
03-25 9967
情景：img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。 使用img的onerror事件，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，图片不存在将显示 logoError.png。 解决方法一、图片路径错误使用默认图片站位： 使用1：html开发中 &...
以全局监听的方式处理img的error事件
weixin_30563917的博客
09-30 772
http://www.ovaldi.org/2015/09/11/%E4%BB%A5%E5%85%A8%E5%B1%80%E7%9B%91%E5%90%AC%E7%9A%84%E6%96%B9%E5%BC%8F%E5%A4%84%E7%90%86img%E7%9A%84error%E4%BA%8B%E4%BB%B6/ 在开发一些电商页面时，往往会有大量的商品图片信息，当图片加载失败...
img标签的原生loading属性和load和error事件
qq_43235503的博客
05-09 1478
img标签的原生loading属性和load和error事件
img 标签使用 @error 事件的时候 图片一直闪烁的问题
m0_61840359的博客
11-29 1096
通过showErrorImg 来判断当前图片是否已经是图片出错处理之后的如果是就证明item.vendorpicfile的图片也出错了所以我们就可以使用默认图片，这样就不会出错啦。上面这段代码一旦otherPic 有并且出错的话就会出现死循环的情况。出现闪烁的原因可能是出现 死循环了。
img标签加载失败方法(onerror)、加载成功(onload)的方法、readystatechange事件、complete属性
热门推荐
yiyueqinghui的博客
05-20 1万+
1、error事件（img标签加载失败的方法） < img src=“123” :οnerrοr=“defaultImg()” /> function defaultImg(){ //地址错误时，直接删除img标签 this.remove() } 或者 function defaultImg(event){ //地址错误时，设置默认图片 let img = event.srcElement; img.src = ‘默认图片地址’; img.onerror
img 标签事件 onerror 图片加载错误
weixin_42448623的博客
09-12 3641
img标签中的src图片加载失败 会出现一个碎片图标 借用img标签的onerror事件，img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。 解决方法：可以使用一张提示错误的图片代替显示不了的图片。 代码如下： <h5>图片路径不正确 备用图片路径正确</h5> <img src="../../img/75.jpg...
vue中img标签404错误处理事件onerror
m0_62823653的博客
05-29 8618
第一部分：vue中img标签onerror事件 第一种方法：使用@error方法能处理onerror事件（据说会导致回闪，目前没遇到） <img :src="xxx图片资源" @error="fn"> //当图片资源加载报错404时会被调用 fn(e) { //substitute为导入进来的图片 e.target.src = this.substitute }, //若是真的遇到了回闪 @error=>:onerror <img :src="xxx图片资源" :o
img onerror
09-07
`img onerror` 是一个事件处理器，用于指定当 img 元素加载失败时应该执行的JavaScript代码。通常用于处理图片加载错误的情况，比如网络请求失败、图片文件损坏或图片资源被删除等。在HTML中，`onerror` 事件可以被添加到 `<img>` 标签的属性中，如下所示： ```html <img src="image.jpg" onerror="this.onerror=null; this.src='default.jpg';"> ``` 在这个例子中，如果图片加载失败，`onerror` 事件会被触发。此时，首先通过 `this.onerror=null;` 确保事件不会被重复触发，然后通过 `this.src='default.jpg';` 将图片替换为一个默认的图片。 需要注意的是，过多使用 `onerror` 或者在 `onerror` 中包含复杂的逻辑可能会导致页面的加载性能下降，并且增加调试的复杂性。因此，通常建议在图片加载逻辑中进行容错处理，或者使用CSS中的 `:not()` 和 `:nth-of-type()` 选择器来处理图片加载失败的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值