大家好，又见面了，我是你们的朋友全栈君。
<img src="http://imgsrc.baidu.com/forum/pic/item/fd1f4134970a304e16d3176ad3c8a786c8175ca8.jpg" />
对于这样一段代码来讲，如果该图片加载成功，那么界面上会显示图片，如果由于一些原因导致图片加载失败，会出现这样的图标。
在正常的项目中，标签的src是后端返回的路径，如果图片加载不出来，显示上面的图标肯定不美观，这时会考虑选择默认的图片，就时候考虑用到img的onerror事件。
本项目中默认图片为：
![图片加载失败的正确处理[通俗易懂]](https://img-blog.csdnimg.cn/20190731174649287.png)
项目中代码为：
<img class="appPic" src="{opts.data.pic}" onerror="{picError}">
js代码为：
self.defaultPic = '/headImg?name=app-default-logo.png';
self.picError = function (e) {
e.target.src = self.defaultPic;
};
如果后端返回的路径信息传到前端，图片没有加载成功，正常应该显示默认的图片，如果默认的图片也加载成功，那么picError事件就不再执行（也就是picError事件只执行一次）。
但是这种写法会出现一个问题：如果后端返回的路径信息传到前端，图片没有加载成功，正常应该显示默认的图片，但是如果默认的图片恰巧也没有加载成功，就会出现默认的图片无限加载的情况。
比如，本项目中,img的html代码为：
<img class="appPic" src="/headImg?name=8567250ff9a369ce33d21780b6ce7e42">
当图片加载到页面上，src会自动和服务端的域名拼接，如：
http://qy.com:9000/headImg?name=8567250ff9a369ce33d21780b6ce7e42
那么就会出现默认的图片无限加载的情况，导致浏览器卡死：
![图片加载失败的正确处理[通俗易懂]](https://img-blog.csdnimg.cn/20190731175226224.png)
那么如何在加载默认图片时，只加载一次呢？如果默认图片不显示，就不再加载，显示图片加载失败的图片呢？
只需要将原来的代码修改为：
self.defaultPic = '/headImg?name=app-default-logo.png';
self.picError = function (e) {
if (!(e.target.src.endsWith(self.defaultPic))) {
e.target.src = self.defaultPic;
}
};
思考一下：如果希望错误次数不是为1而是为2，3…应该怎么解决呢？
self.defaultPic = '/headImg?name=app-default-logo.png';
self.picError = function (e) {
// 失败加载一次
// if (!(e.target.src.endsWith(self.defaultPic))) {
// e.target.src = self.defaultPic;
// }
// 失败加载三次
const target = e.target;
const errorTimes = self.errorTimes || 0; // 以当前失败的次数，默认为0
const allTimes = 3; // 总失败次数，此时设定为3
if (errorTimes >= allTimes) {
// target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
return;
} else {
self.errorTimes = errorTimes + 1;
target.src = self.defaultPic;
}
};
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/137924.html原文链接：https://javaforall.net
