img图片加载出错默认图片处理

第一种

<template>
  <div>
    <img :src="imageSrc" ref="img">
  <div>
</template>

<script>
export default {
  name: 'fallback-image',
  props: ['src', 'srcFallback'],
  data () {
    return {
      imageSrc: this.src
   }
  },
  mounted () {
    this.$refs.img.onerror = () => {
      this.imageSrc = this.srcFallback
    }
  }
}
</script>

第二种

<img v-bind:src="userData.photo" :onerror="logo" class="img-box4">  
data: () => ({  
    logo: 'this.src=null;this.src="' + require('../assets/img.png') + '"'  
})  

第三种

<img :src="item.img" @error="imgError(item)" />
imgError(item) {
       item.img = require('../../assets/img-default.png');
}