判断图片是否存在，不存在则显示默认图片

最新推荐文章于 2021-06-10 13:13:40 发布

weixin_30675247

最新推荐文章于 2021-06-10 13:13:40 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jry199506/p/11040175.html

版权

记录每一个小坑、大坑

利用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事件，说实话到现在才知道，用起来挺方便的，记笔记记笔记~

点个赞呗！

转载于:https://www.cnblogs.com/jry199506/p/11040175.html

weixin_30675247

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
判断图片是否存在，不存在则显示默认图片

记录每一个小坑、大坑利用image对象的onerror事件来判断，出错则更换image对象的src为默认图片的 URLhtml 代码<img src="./img/No_Pics.jpg" onerror="javascript:this.src='./img/No_Pics.jpg'" alt="" id="img">j...
复制链接

扫一扫