图片的src不存在，报404错误，加onerror的解决方法

最新推荐文章于 2023-02-01 16:58:10 发布
最新推荐文章于 2023-02-01 16:58:10 发布
阅读量2.5k 收藏
点赞数
分类专栏： js 文章标签： 函数 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxj124/article/details/78421538
版权

当img的src不存在时，报404错误，如果想要实现效果：当找不到图片的时候检测到，用一个替补照片，可以通过onerror函数监测到。

js代码：

function nofind () {
var img = event.srcElement;
img.src = “http://ossweb-img.qq.com/images/clientpop/msgcenter/lol/img/1488282413/48323.jpg“;

// img.οnerrοr=null;// 控制不要一直跳动
}

以上效果可以直接在html页面里面写，也可以实现动态渲染的效果，js里面，定义一个tpl绑定也可以

js校验图片是否加载成功或失败
weixin_48853103的博客
11-29 3659
onload ：事件会在页面或图像加载完成后立即发生。 onerror： 事件在加载外部文件（文档或图像）发生错误时触发。 验证图片成功方法： let IMG =new Image(); IMG.src = 需验证图片src; IMG.onload= ()=> { _this.imgSrc = 验证成功后需要改的src; } 验证图片失败方法： let IMG =new Image(); IMG.src = 需验证图片src; IMG.onerror= ()=> { _th
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
运行YOLO算法检测图片时出现“图片不存在的错误”AssertionError: Image Not Found D:\PyCharmProject\yolov5改进\out.jpg
最新发布
m0_50004939的博客
02-01 4356
运行YOLO算法检测图片时出现“图片不存在的错误”AssertionError: Image Not Found D:\PyCharmProject\yolov5改进\out.jpg
小程序设置image的src为空报错
weixin_39782183的博客
03-09 1119
今天在开发小程序的时候，遇到了一个小坑，在此记录下，代码如下。 wxml <image mode="widthFix" src="{{link}}"></image> js const app = getApp(); Page({ data: { link:'../../statics/images/loading.png' }, ...
用Javascript判断图片是否存在，不存在则显示默认图片 onerror事件
weixin_30869099的博客
07-16 195
<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...
html img 图片加载不到或不存在时 onError
paulfzm的专栏
12-11 1465
&lt;img src="img.jpg" alt=""/&gt; html img 图片加载不到或不存在时 onError &lt;img src="img.jpg" alt="" onError="this.src=image/nopic.gif';" /&gt;   显示默认图片  
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
08-28
xmlHTTP.onerror = reject; xmlHTTP.send(); } else { // 如果不是IE，可以直接使用toDataURL const img = new Image(); img.crossOrigin = "Anonymous"; img.onload = () => { const canvas = document....
解决js图片加载时出现404的问题
10-23
解决JavaScript中图片加载出现404错误的问题，首先需要了解这个错误是如何产生的。当浏览器尝试加载图片资源，但是找不到对应的文件时，就会出现HTTP 404错误。这可能是由于文件路径错误、文件确实不存在或者服务器...
jQuery 图片加载不出来，报错404.docx
06-04
通过以上分析和解决步骤，可以有效解决 jQuery 图片加载时出现的 404 错误。关键是理解图片路径在不同环境下的差异性，并采取相应的措施进行调整。同时，合理利用 jQuery 提供的功能，可以更加灵活地处理图片加载...
Android Studio各类常见错误解决方案
whj9073的专栏
06-02 5603
（1）将Eclipse项目导入到Android studio 中 很多点9图出现问题解决方法： 在build.gradle里添加以下两句： aaptOptions.cruncherEnabled = false aaptOptions.useNewCruncher = false 用来关闭Android Studio的PNG合法性检查的，直接不让它检查。 （2）Andro
img onerror事件
weixin_30287169的博客
10-12 77
https://blog.csdn.net/kkgbn/article/details/54644843 转载于:https://www.cnblogs.com/beimingbingpo/p/9778352.html
当src获取不到图片，onerror可指定一张默认的图片
weixin_33843409的博客
03-27 1598
<img src="img/789.png" onerror="javascript:this.src='img/123.png';" alt="pic" /> 注意：当img/789.png图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 img/123.png图片。也就是说图片存在则显示 img/789.png，图片不存在将显示img/1...
加载图片404，设置默认图片（onerror事件的用法）
QZ9420的博客
07-27 372
例如： <img :src="userLogoImgUrl" :onerror="defaultImg" alt=""/> 出现如下错误： defaultImg: 'this.src="' + require('../../assets/image/governMenu/default_head_photo.png') + '"',
elementUI中的el-image 加载失败原因和解决方案
热门推荐
xiaoyuer_2020的博客
03-07 2万+
最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是el-image的src路径一旦初始化加载失败的话就没有异步刷新： 解决办法： 1.给:src设置默认值，避免图片加载失败的情况 2.加v-if判断:src中的value值是否为空或者:src的key值是否存在，是则加载图片，否则不加载 3.vue项目error方法绑定once，为避免同一个失败链接无限触发error（加载失败后再次请求图片的方法） ...
img src 相对地址自动加上当前url导致404
MISS假老练的博客
12-16 4492
疑难杂症
img标签地址src路径拼接_处理图片img src=“链接”地址 404解决方法
weixin_39600837的博客
12-22 1108
问：一个图片链接 想用js 判断url是否有效如果404 就try catch加载默认的图片路径。 求解怎么做。关键是怎么判断链接是否404答：可以给img标签加onerror事件：PS：图片标签img的 onerror事件 分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic...
处理图片img src=“链接”地址 404解决方法
kabukistt3的专栏
08-14 1万+
问：一个图片链接 想用js 判断url是否有效如果404 就try catch加载默认的图片路径。 求解怎么做。关键是怎么判断链接是否404 答：可以给img标签加onerror事件： src="xxx" onerror="this.src=默认图地址"/> PS：图片标签img的 onerror事件 分析：特别注意 onerror，当图片不存在时，将触发 onerro
vue-cli3项目中解决动态引入图片img404的问题
weixin_30244889的博客
09-17 1214
博主最近手头再做一个项目，需要调用天气接口，并且还要动态显示天气相关图片icon。 本来以为没什么大问题，结果硬生生被这个动态图片路径搞得民不聊生（博主还是 too young，too simple~），给出效果图： 就是那个红框选中的那个天气状况图标icon要根据当前城市获取当前城市天气状态码，再根据当前城市状态码找到这个对应的天气图标icon~~ 按照一般的开发模式，...
ionic开发——图片加载失败或不存在时显示提示图片的解决方法
Mickeymouse
09-19 4487
当图片加载失败或者不存在的时候，我们需要一张提示图片来代替他。用判断就太麻烦了，img有自己的方法onerror , 当找不到图片的时候就会执行onerror里面的代码 例如： 当1.jpg找不到的时候，会自动加载2.jpg.  那如果2.jpg也找不到怎么办？就会一直执行onerror里面的代码，陷入死循环。 所以，我们可以这
Nginx配置404错误页面并返回404状态码的解决方法
通过这些步骤，我们可以确保当用户请求不存在的资源时，既能展示自定义的404错误页面，又能正确地返回404状态码，以便客户端进行相应的错误处理。这对于提高网站的用户体验和故障排查非常重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值