Vue 中使用自定义指令解决 图片地址错误的时 图片裂开问题

在main.js中 写自定义指令

Vue.directive('errorImg', {
  inserted(el, binding) {
    // el 指令所在的元素  也就是我们的img标签
    // binding 指令的相关信息对象
    el.onerror = function() {
      // console.log('图片加载失败了'), 设置备用图片地址
      el.src = binding.value // binding.value 指令的值 也就是我们的defaultImg
    }
  }
})

在组件中 使用

<template>
<img v-errorImg="defaultImg" :src="avatar" class="user-avatar">
</template>
// 导入默认图片当 图片裂开或地址不对时 显示这个图片
import defaultImg from '@/assets/common/bigUserHeader.png'

定义一下
data() {
    return {
      defaultImg: defaultImg
    }
  },