当图片加载失败时,做处理(onerror)(vue)
问题:在写项目时,使用的img标签总会遇到一些奇奇怪怪的图片,不是加载慢就是加载不出来,所以我们做相应的处理,就能使得用户体验更好了
解决: 给img标签一个onerror失败事件,在图片加载失败时做处理,删除或者更换图片就好了。
上代码:
<img :src="content.thumb " class="link_img_box" @error="errorImg">
// 或者
<img :src="content.thumb " class="link_img_box" :οnerrοr="defaultImg">
// 图片加载失败
errorImg(e) {const img = e.srcElementimg.src = 'https://crm-1253803335.file.myqcloud.com/img/20211215/df47506f3a039c86.png?imageView2/1/w/52/h/52'img.onerror = null // 防止闪图},// 或者defaultImg(){ //地址错误时,直接删除img标签this.remove()
}
如果需要做加载中操作,同理,可以给一个@load事件,对图片加载中时做处理
当图片加载失败时,做处理(onerror)(vue)相关推荐
- img加载失败时,限制onerror执行次数
在vue中,图片加载失败时,用onerror重复请求10次,如果还是失败,则替换为默认图片的实现 <el-table-column prop="imageUrls" labe ...
- vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法 前言 本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 原理 ...
- [html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢?
[html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢? 当默认图也失效,就会陷入死循环,需加变量计数,如果是 vue 的话用 @error.once 更妙.在 onerror 给元 ...
- img图片加载失败时,展示默认图片的方法
1. 图片加载失败时会触发onerror事件,可以通过onerror事件使默认图片代替加载失败的图片 <img src="要展示的图片的地址" onerror="t ...
- img图片加载失败时的处理
当想对图片加载失败时进行特殊处理,可以使用onerror事件,里面为需要执行的代码. 如果由于其他原因导致onerror事件里加载图片时又报错,此时有可能会导致栈溢出而弹框报错,我们只需在inerro ...
- 图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示 我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片 1.监听图片的 er ...
- 当原图片加载失败时,如何让图片加载上我们默认给的图片
我们可能会遇到这样的问题,当页面中的图片的加载失败时,我们想要该图片加载我们给的默认的图片,我在这里分享一下几种做法,希望对大家有所帮助. 1.在img标签中加上 οnerrοr="this ...
- HTML img图片加载失败时用默认图片替换
原文地址:http://blog.csdn.net/qq_24771775/article/details/50294931 img元素加载图片失败,则变成一个小图标,让页面变得难看.此时如何替换为默 ...
- 图片加载失败时展示默认图片
HTML: <img src='${defalutImg}' data-src="${fileDomain }/images/${poi.firstPic}" width=& ...
最新文章
- Delphi数据库开发之TTable篇1
- mysql数据库同步 debug
- ntfs分区对linux的局限,如何使Linux支持NTFS分区
- 最佳开发工具大全!前谷歌工程师两年打造“厂外生存指南”,登上GitHub热榜
- 全文搜索引擎选 ElasticSearch 还是 Solr?
- Linux 平台下 RMAN 全备 和 增量备份 shell 脚本
- [云炬创业基础笔记]第二章创业者测试8
- JavaScript(三)——函数、变量作用域、方法
- 用计算机控制人造卫星和导弹的发射属于,2008年6月全国高校计算机等级考试(广西考区)一级笔试试题卷...
- WPF框架教程 | 从0到1:使用Caliburn.Micro(WPF和MVVM)开发简单的计算器
- easyui-tabs
- java 并行_Java 中不同的并行实现的性能比较
- 笨办法学 Python · 续 练习 6:`find`
- jquery可见性过滤选择器:hidden、:visible
- 谷粒商城:10.商品服务 — 属性分组
- [转][python] 常用正则表达式爬取网页信息及分析HTML标签总结
- 嵌入式USB转RS232九针串口线驱动,及串口软件secureCRT的使用
- 信号的频谱分析,加噪降噪处理
- 分库分表中间件Sharding-JDBC详解
- 【可收藏】3W字,Docker 从入门到精通