判断图片是否存在,不存在则显示默认图片
记录每一个小坑、大坑
利用
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
事件,说实话到现在才知道,用起来挺方便的,记笔记记笔记~