img图片请求失败后的处理

前端使用img标签时，有时候会遇到加载失败的情况，造成失败的原因有很多，网络问题、路径错误、资源已被删除等，img会显示一个裂图。从用户体验上来说，需要进行处理，常用的是用准备好的一张图片提示用户加载失败。

不做任何设置时正常显示与错误显示。

1、onerror 事件监听

onerror事件在加载外部文件（文档或图像）发生错误时触发。
因此在img标签上添加onerror事件并设置对应函数，函数内部有一个错误提示图片的路径（此处路径就不写了，使用类似于下图的可以对用户起到提示作用的图片的路径即可），当请求失败后会执行该函数。但是onerror有一个弊端，不处理好的话会导致无限循环请求图片导致阻塞。

  <img src="logo.png" onerror="errHandle(this)">

function errHandle (imgDiv) {
  imgDiv.src = 'errorTip.png'; 
}

另一种写法，个人推荐前一种，比较好管理，因为可能会有些别的处理。

<img src="images/logo.png" onerror="javascript:this.src='errorTip.png';">`

2、onerror弊端的解决，优化写法

在onerror对应的函数内部解除所绑定的onerror事件，避免死循环。

function errHandle (imgDiv) {
  imgDiv.src = 'errorTip.png'; 
  imgDiv.onerror = null; // 避免请求失败后不断请求
}

<img src="images/logo.png" onerror="javascript:this.src='errorTip.png';this.οnerrοr=null">`