＜img＞图片url获取失败时通过onerror显示默认图片

第一种方法：

<img :src="data.imagePath" :onerror="errorImage" />

在data中：

errorCarImg: `
this.src = "${errorCarImg}";
this.style = "width:56px;
height:56px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
this.onerror = null;"`

其中this.onerror = null是为了处理若onerror里的图片仍然加载失败了，则会出现死循环，页面上图片会一直跳动。

以上方法用于简单图片的异常处理或者循环图片且没有样式需求时就足够了，如果你需要循环图片，并且需要对异常的图片进行样式处理时，会出现如下图的情况：

 

 为了处理这种情况，可采用第二种方法：

<img :src="data.imagePath" @error="errorImage" @load="loadImage"/>

loadImage (event) {
        console.log('loading')
        let img = event.target;
        img.style.width = '100%'
        img.style.hight = '100%'

    },
    errorImage (event) {
      console.log('error')
      let img = event.target;
      img.src = this.errorCarImg;
      img.onerror = null; //防止闪图
      img.style.width = '56px'
      img.style.hight = '56px'
      img.style.position = 'absolute'
      img.style.top = '50%'
      img.style.left = '50%'
      img.style.transform = 'translate(-50%,-50%)'
    }

此时你会发现，error里的样式居然不生效了，他用的居然是load里面的样式，这究竟是怎么回事呢?打开控制台，我们会发现在图片加载失败时，输出了：

error loading

原来在加载失败时load函数也被执行了，且在error函数之后执行的，所以在load里写的样式覆盖了error里写的样式。

那我们通过一个变量来控制load里的样式不就可以了。

完成代码：

<img :src="data.imagePath" @error="errorImage" @load="loadImage"/>

data中：

imgError: false

watch中：由于卡片的信息是从父组件传递进来的，所以在数据内容变化时，重新将imgError赋值

watch: {
    data: {
      handler (n, o) {
        this.imgError = false
      },
      immediate: true,
      deep: true
    }
  },

loadImage (event) {
        if (this.imgError === false) {
        console.log('loading')
        let img = event.target;
        img.style.width = '100%'
        img.style.hight = '100%'
      }

    },
    errorImage (event) {
      this.imgError = true
      let img = event.target;
      img.src = this.errorCarImg;
      img.onerror = null; //防止闪图
      img.style.width = '56px'
      img.style.hight = '56px'
      img.style.position = 'absolute'
      img.style.top = '50%'
      img.style.left = '50%'
      img.style.transform = 'translate(-50%,-50%)'
    }

此时就出现了我们想要的样子：