vue中自定义指令解决图片加载失败

目标： 通过自定义指令的形式解决异常图片的处理

<div class="avatar-wrapper">
    <img v-imageError="defaultImg" :src="avatar" class="user-avatar">
    <span class="username">{{ username }}</span>
    <i class="el-icon-caret-bottom" />
</div>
复制代码

data() {
    return {
      defaultImg: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%8D%A1%E9%80%9A%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=2&spn=0&di=87450&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=4245350061%2C3599711701&os=2077598870%2C2037842478&simid=3354338549%2C294751891&adpicid=0&lpn=0&ln=1460&fr=&fmq=1628732905154_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201508%2F16%2F20150816181747_PjkVd.jpeg%26refer%3Dhttp%3A%2F%2Fcdn.duitang.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1631324920%26t%3D26747bfb6ee96cbbb9f5cbee12f3b6c2&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Frj5rsjAzdH3F4ks52AzdH3F9na8dn0abAzdH3F1jpwtsAzdH3F&gsm=3&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined'
    }
  },
复制代码

自定义指令

注册自定义指令

// 自定义图片加载失败的指令
Vue.directive('imageError', {
// inserted是钩子函数：该定义指令绑定的元素插入到父节点时执行
inserted(dom, binding) {
  // dom是该指令绑定的元素img
  // binding是一个对象，里面的value是指令绑定的变量
  console.log(dom)
  console.log(binding)
  // 判断图片为空
  // dom.src = dom.src || binding.value
  if (!dom.src) {
    dom.src = binding.value
    return
  }
  // 判断图片加载失败
  // .onerror是img加载失败执行的函数
  dom.onerror = function() {
    dom.src = binding.value
  }
}
})
复制代码