图片加载失败,img触发错误显示默认图片
<img src='要显示的图片路径' onError={(e) => {e.target.onerror = null;e.target.src="占位图片路径"}} />
onError:当图片加载出现错误,会触发。经常在这里事件里头写入 将图片导向默认报错图片,以免页面上出现红色的叉叉或者出现图片破裂的图标。但是如果备用图片也错误了,就会造成死循环的问题,前端就可能挂掉,这时候再添加上onerror = null就好。
react中可以用上面这个
onerror 原生的html中, 可以使用下面这种:
<img src="要显示的图片路径" οnerrοr="οnerrοr=null;src="占位图片路径"> (在react中使用这个不起作用)
另外 ,还可以通过判断图片是否有宽和高:
// 检测图片是否存在const checkImgExists = imgurl => { var ImgObj = new Image(); //判断图片是否存在 ImgObj.src = imgurl; //没有图片,则返回-1 if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { return true; } else { return false;} }
图片加载失败,img触发错误显示默认图片相关推荐
- element ui 图片加载失败_解决Element UI - el-image 图片初始化加载失败问题
最近使用elementUI的el-image发现经常会出现加载src失败的情况,问题估计就是e-image的src路径一旦初始化加载失败的话就没有异步刷新,(这个地方需要注意过这个问题的大佬解读下源码 ...
- 小程序图片加载失败binderror方法处理
场景:我们在小程序项目中的一个图片列表,当某些图片加载失败后,直接显示空白,这样用户体验不好,为了解决当图片加载失败,我们给一个默认图片代替,参考官方给的图片加载失败的处理方法:binderror c ...
- img图片加载失败选择默认替换图片
一般我们需要加载图片的有两种: 1.img 标签直接通过src引用图片地址 img标签的话,可以通过img自带属性onerror 写一个js进行控制,当图片加载失败后触发onerror <img ...
- html 图片显示一块一块加载失败,页面中图片加载失败的优化方法
网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的.情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大 ...
- img图片加载失败时,展示默认图片的方法
1. 图片加载失败时会触发onerror事件,可以通过onerror事件使默认图片代替加载失败的图片 <img src="要展示的图片的地址" onerror="t ...
- 图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示 我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片 1.监听图片的 er ...
- 前端页面图片加载失败显示默认图片
方法有多种: 1.首先说我用的,看代码 //页面图片加载失败时 默认显示统一处理 document.addEventListener("error", function (e) { ...
- htmlimg图片加载失败_动态加载图片失败的默认图显示
经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来.那么为了提高用户体验,都会显示一个默认图. 动态加载图片失败时,显 ...
- 图片加载失败后显示默认图片
加载失败后显示默认图: <img :src="`${img}.png`" onerror="javascript:this.src='logo.png'" ...
- img标签图片加载失败显示图片
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
最新文章
- linux免安装nginx,Nginx免安装包制作工具:Nginx-portable
- Windows+Nginx+IIS做图片分布式存储详细步骤
- PAT1021 Deepest Root
- 剑指OFFER之用两个栈实现队列(九度OJ1512)
- [软件工程基础]2017.10.30 第三次 Scrum 会议
- shell中txt转EXCEL
- android9 三星 港版,三星S9+官方港版安卓9完整固件系统升级包:TGY-G9650ZHU5CSFB
- oracle系统FA调整折旧年限,Oracle财务管理系统培训手册.doc
- mybatis批量新增和修改
- 杨辉三角(C语言简单版)
- 智能手机操作系统大全-未完待续
- 【uiautomation】获取微信好友名单,可指定标签 全部
- 小蓝本 第一本 《因式分解技巧》 第七章 综合运用 笔记 (第七天)
- CDN 的功能有哪些?
- Hexo+Buttterly+Github Pages构建个人博客
- 数据采集—数据采集技术
- 维克森林大学计算机科学专业好不好,美国维克森林大学计算机科学硕士专业介绍...
- 除了python人工智能还可以用哪些编程语言实现?
- android 尺寸转换 dp sp in mm pt px转换为int
- java+springboot+ssm学生实习报告作业评分管理系统
热门文章
- xzp android webview,加载gif动态图的三种方式
- 使用Go语言开发生成阿里云ECS监控报表,定时自动发送邮件给指定人员
- java 多线程抢票_多线程抢票详解
- 微服务: 立志做个伟大的项目
- Linux中对的tac命令
- [BCE]光照传感器测量光照度-arduino程序
- 30ea什么意思_阿玛尼ga是什么意思、和ea的区别
- [大数据技术] 淘宝双11数据分析与预测实验
- python期货基本面分析_Python量化炒期货入门与实战技巧
- Pycharm 下载模块中出现的 Error 解决方法