JS通过onerror判断图片是否存在

最新推荐文章于 2022-08-05 11:36:06 发布
最新推荐文章于 2022-08-05 11:36:06 发布
阅读量4k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxlzhn/article/details/7774899
版权

JS通过onerror判断图片是否存在，如果不存在，则替换为指定的默认图片：

<img src="/imgages/headimg/10000011.jpg" οnerrοr="javascript:this.src='/images/default.jpg'"/>

如果图片/imgages/10000011.jpg不存在，则显示/images/default.jpg。

lxlzhn
关注
专栏目录
用Javascript判断图片是否存在，不存在则显示默认图片的代码
10-30
可以通过`onerror`事件来判断图片是否存在。具体做法是将图片的`src`属性设置为需要检测的图片地址，然后通过`onerror`事件来处理图片加载失败的情况。如果图片加载失败，`onerror`事件会被触发，然后我们可以将图片...
js onerror事件
Joy_Yue的博客
12-13 1372
官方文档上对这个事件的解释是： onerror 事件会在文档或图像加载过程中发生错误时被触发。 在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。 那么它是用在什么地方，怎么用的？ 举个栗子：在开发中，有通过接口传来的图片，但该图片不一定能读出来（也就是报404错误）。 这时如果不做处理，在Chrome下图片会不显示，在ie下会出现一个图片缺省的样子（很丑...）。 测试小姐...
JavaScript-onerror事件:图片加载失败后不显示
weixin_30752377的博客
06-02 333
HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" id="img1" onerror="hideImg1();"> <!--下面这个图加载失败但不会出现加载失败的样式--> <img src="http://www.mazey.net/i...
js注意img图片的onerror事件的分析
学习笔记
12-31 3545
打开网页时提示 Stack overflow at line: 0。img图片的onerror事件需要注意的细节。 经过分析，发现网页中存在类似如下的代码： 分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif，图片不存在将显示 noPic.gif。但问
js判断图片是否存在
Crazy_GirlLL的博客
08-05 2691
js判断图片是否存在
javascript判断图片是否加载完成的方法推荐
10-22
本篇知识分享将向你介绍如何使用JavaScript来判断图片是否加载完成，以及相关的几种方法及其优缺点。 首先，最直接的方式是利用img标签自带的onload事件。onload事件会在图片完全加载完成后触发，我们可以在这个...
JS实现判断图片是否加载完成的方法分析
10-18
这篇文章将介绍几种常见的JS实现判断图片是否加载完成的方法，这些方法有助于优化用户体验，特别是对于那些依赖大量图片的网页。 1. **onload事件** `onload`事件是在元素（如`<img>`）的资源加载完成后触发的。...
如何基于JavaScript判断图片是否加载完成
10-15
在JavaScript中，正确判断图片是否加载完成是网页动态加载和展示图片时不可或缺的技能。这个问题在Web开发中经常遇到，特别是在处理用户上传的图片或远程图片资源时。本篇文章将详细探讨如何通过JavaScript来实现这...
完美兼容多浏览器的js判断图片路径代码汇总
10-24
因此，我们还需要检查文件大小fileSize是否大于0或者图片的width和height是否大于0，这样的双重判断可以更准确地判断图片是否真正存在。 ```javascript function CheckImgExists(imgurl) { var ImgObj = new Image...
img标签的onerror事件（应用以及注意事项）
热门推荐
我的博客
08-14 6万+
情景分析：有时，img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。 博主现在抛砖引玉，说说自己的解决方案。 通过百度，可以给img标签加背景图片，代码如下： .headLogo img{     display: block;     width: 270px;     height: 60px;     background: url(
前端js错误监控onerror的总结
yin_you_yu的博客
07-18 4952
最近一直在做前端js错误监控的工作，在不断的打磨和完善中，发现里面还是知识点不少，现在就前端js错误监控做一些笔记和总结 我们知道前端js错误监控主要是利用了window.onerror函数来实现，onerror函数会在页面发生js错误时被调用。 window.onerror = function(message, source, lineno, colno, error) { ... } ...
php实现image onerror,图片(img标签)的onerror事件
weixin_33955307的博客
03-21 481
分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif，图片不存在将显示 noPic.gif。但问题来了，如果 noPic.gif 也不存在，则继续触发 onerror，导致循环，故出现错误。说明：如果图片存在，但网络很不通畅，也可能触发 onerror。解决方法：第一种...
用Javascript判断图片是否存在，不存在则显示默认图片 onerror事件
weixin_30869099的博客
07-16 187
<img width="90" height="120" src="../images/avatars/default.jpg" onerror="javascript:this.src='../images/avatars/default.jpg'" border="0"/> 或者<img width="90" height="120" src="../images/ava...
判断（img标签）中src的路径中照片文件是否存在
liayn523的博客
09-19 2万+
判断（img标签）中src的路径中照片文件是否存在
vue中img标签404错误处理事件onerror
m0_62823653的博客
05-29 8301
第一部分：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事件
xihii6的专栏
06-25 3219
搜索设置|百度首页|登录注册 新闻　网页　贴吧　知道　音乐　图片　视频　地图　文库　更多» 输入法 手写拼音关闭 推荐 : 用手机随时随地上百度 <!-- .ec_bdtg .fsblock {padding:0; word-break:normal; font-family:arial; font-s
＜img＞图片url获取失败时通过onerror显示默认图片
weixin_42077503的博客
09-06 1829
第一种方法： <img :src="data.imagePath" :onerror="errorImage" /> 在data中： errorCarImg:` this.src="${errorCarImg}"; this.style="width:56px; height:56px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); this.onerror=null;"...
js--判断图片资源是否存在
最新发布
05-18
在 JavaScript 中，可以使用 `Image` 对象来判断图片资源是否存在。具体做法如下： 1. 创建一个 `Image` 对象。 ``` const img = new Image(); ``` 2. 给 `Image` 对象设置 `src` 属性，并监听 `load` 和 `error` 事件。 ``` img.src = '图片路径'; img.onload = function() { console.log('图片存在'); }; img.onerror = function() { console.log('图片不存在'); }; ``` 3. 判断图片资源是否存在。 如果图片资源存在，`onload` 事件会被触发，如果图片资源不存在，`onerror` 事件会被触发。 完整的代码如下： ``` const img = new Image(); img.src = '图片路径'; img.onload = function() { console.log('图片存在'); }; img.onerror = function() { console.log('图片不存在'); }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值