onerror事件 判断图片是否存在,不存在则显示默认图片
- 介绍:
- 热度:
- 分类:
- 标签:
利用 image 对象的 onerror 事件来判断,出错则更换 image 对象的 src 为默认图片的 URL
HTML 代码
<img src="./img/No_Pics.jpg" onerror="javascript:this.src='./img/No_Pics.jpg'" alt="" id="img">
JS 赋值
var truepic = `./Pic/${getdata.USER_NAME}.jpg`$("#img").attr("src", truepic)
直接应用函数($\color{red}{引用菜鸟教程例子}$)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <img src="image.gif" onerror="myFunction()"> <p>如果在加载图片时发生错误则触发函数 myFunction() 函数会弹出提示窗口。</p> 该实例中我们引用的图片不存在,因此会触发 onerror 事件。 <script> function myFunction() { alert('无法加载图片。'); } </script> </body> </html>
适用所有主流浏览器,包括 IE
衍生问题
img 使用 onerror 以后,如果 onerror 指定的图片也是不存在的话,会出现无限死循环 404 。
解决方法
<img src="image.gif" onerror="javascript:this.src='src/images/default.jpg';this.onerror = null">
简单的 onerror 事件,说实话到现在才知道,用起来挺方便的,记笔记记笔记~
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。