图片加载失败的正确处理

<img src="http://imgsrc.baidu.com/forum/pic/item/fd1f4134970a304e16d3176ad3c8a786c8175ca8.jpg" />

对于这样一段代码来讲，如果该图片加载成功，那么界面上会显示图片，如果由于一些原因导致图片加载失败，会出现这样的图标。
在正常的项目中，标签的src是后端返回的路径，如果图片加载不出来，显示上面的图标肯定不美观，这时会考虑选择默认的图片，就时候考虑用到img的onerror事件。
本项目中默认图片为：

项目中代码为：

<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

那么就会出现默认的图片无限加载的情况，导致浏览器卡死：

那么如何在加载默认图片时，只加载一次呢？如果默认图片不显示，就不再加载，显示图片加载失败的图片呢？
只需要将原来的代码修改为：

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;   // 以当前失败的次数，默认为0const allTimes = 3; // 总失败次数，此时设定为3if (errorTimes >= allTimes) {// target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';return;} else {self.errorTimes = errorTimes + 1;target.src = self.defaultPic;}
};

图片加载失败的正确处理相关推荐

图片加载失败替代文字_替代艺术：为图像编写出色的描述性文字
图片加载失败替代文字 The web gains its strength through diversification: the more accessible it is to everyone ...
图片加载失败后---加载默认图片
一 . 图片加载失败原因: 文件路径不正确: 标签属性等元素错误: 错误的文件扩展名文件丢失存放位置出现问题网络传输问题: 二 . 加载失败后页面默认样式如下 ↓: 三 . 封装函数:图片加载 ...
SpringBoot项目中可以上传图片，但图片加载失败
目录项目场景: 问题描述原因分析: 解决方案: 项目场景: 最近有个Springboot项目的图片不显示问题描述在项目中,可以上传图片,但加载失败系统运行正常: 在添加图片的位置中,可以选择 ...
Service Worker 图片加载失败处理
Service Worker 图片加载失败处理参考文档 git clone https://gitee.com/wjj0720/Service-Worker.git 运行 npm i npm sta ...
js img图片加载失败，重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片 //js方法定义 function re ...
[html] 当img标签中的src图片加载失败时，怎么让它变得更美观呢？
[html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢? 当默认图也失效,就会陷入死循环,需加变量计数,如果是 vue 的话用 @error.once 更妙.在 onerror 给元 ...
angular--解决angular图片加载失败问题
angular--解决angular图片加载失败问题参考文章: (1)angular--解决angular图片加载失败问题 (2)https://www.cnblogs.com/cong-bao/p ...
img图片加载失败时，展示默认图片的方法
1. 图片加载失败时会触发onerror事件,可以通过onerror事件使默认图片代替加载失败的图片 <img src="要展示的图片的地址" onerror="t ...
img图片加载失败时的处理
当想对图片加载失败时进行特殊处理,可以使用onerror事件,里面为需要执行的代码. 如果由于其他原因导致onerror事件里加载图片时又报错,此时有可能会导致栈溢出而弹框报错,我们只需在inerro ...

图片加载失败的正确处理

图片加载失败的正确处理相关推荐

最新文章

热门文章