图片加载失败替换图片解决方案

大家好，又见面了，我是你们的朋友全栈君。

图片加载失败在不同浏览器表现有差异，比如google可能会一片空白、img的宽高是0*0，ie会在图片位置会出现一个碎片图标，火狐会显示一个边框像这样：

一个页面如果很多这种好难看，一般会用默认图片替换显示，解决方法：

1、css方案：不好使。在img的伪类加替换图片，但火狐的img没有伪类，google有，有时候就算给img标签加了width、height也没有，图片加载失败img的宽高依然是0，详情见这篇文章：

https://www.cnblogs.com/fangsmile/p/7290945.html

这样使用是应为img标签的一些特性：

1，img是个比较特殊的标签，和video一样具有被替代性，所有当图片加载成功时，原先定义的伪类会失去作用不提示。

2，alt属性会在图片加载失败是出现（替代文字），这样伪类就会起作用了。

img {
  position: relative;
}
 
img:after { 
  content: ' ';
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('替代图片');
  background-size: 100% 100%;
}

css方案由于兼容问题，不能完美解决，所以推荐js方案：

通过img的onerror事件处理

<img src="http://www.baidu.com/jfdsklf.img"  onerror="this.src= '/assets/img/head.png'; this.onerror = null;">

// this.onerror = null; 是为了防止替换图片还是丢失，img一直闪烁不停

另外，vue可以这样写：

<img :src="imgUrl" alt="" width="100" height="70" @error="imgOnerror($event)">

...
data() {
    return {
      defaultImg: require('./../../../assets/img/default-course.jpg')
    }
},
methods: {
    imgOnerror(event) {
      let img = event.srcElement
      img.src = this.defaultImg
      img.onerror = null // 防止闪图
    },
    ...
}

本人目前主要开发vue的项目，其实可以更高级的写法：封装成指令很方便：

directive.js

import Vue from 'vue'

/**
 *
 * 注册一个全局自定义指令 `v-errorAlt`
 * 加载错误图片替换默认图
 * */
const courseImg = require('./../assets/img/default-course.png')
const certificateImg = require('./../assets/img/default-certificate.png')
const photoImg = require('./../assets/img/photo.png')
Vue.directive('errorAlt', {
  bind: function (el, binding) {
    el.onerror = () => {
      switch (binding.value) {
        case 'course':
          el.src = courseImg
          break
        case 'cert':
          el.src = certificateImg
          break
        case 'photo':
          el.src = photoImg
          break
        default:
          el.src = certificateImg
      }
      el.onerror = null // 防止闪图
    }
  },
  update: function (el, binding) {
    el.onerror = () => {
      switch (binding.value) {
        case 'course':
          el.src = courseImg
          break
        case 'cert':
          el.src = certificateImg
          break
        case 'photo':
          el.src = photoImg
          break
        default:
          el.src = certificateImg
      }
      el.onerror = null // 防止闪图
    }
  }
})

html使用：

<img :src="imgUIrl" alt="" v-errorAlt="'cert'">