通常情况下我们设置的图片都能正常显示，但是有时候会由于图片路径失效等情况导致图片加载失败，所以我们得为图片设置实现后默认显示的备用图片，这里可以使用自定义指令的方式解决
自定义值指令
注册自定义指令方式
Vue.directive('指令名称', {
// 会在当前指令作用的dom元素 插入之后执行
// options 里面是指令的表达式
inserted: function (dom,options) {
}
})
在项目中我们可能会注册多个自定义指令，所以我们不可能挨个去给指令注册，这里可以使用模块化的方式统一注册与
管理 在main.js
自定义指令可以采用统一的文件管理`src/directives/index.js`,这个文件负责管理所有的自定义指令
首先定义一个自定义指令 v-imagerror
export const imgerror = {
//指定对象,会在当前的dom元素插入到节点之后执行
inserted(dom, options) {
//options是指令中的变量的解释，其中有一个 属性叫做value
//dom表示当前指令作用的dom元素
//dom认为此时就是图片
//当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
dom.onerror = function () {
//当图片出现异常的时候 会将指令配置的默认图片为该图片的内容
//dom可以注册error事件
dom.src = options.value //这里不能写死
}
//还需要检测图片为空的状况
dom.src = dom.src || options.value
}
}
在main.js完成自定义指令全局注册
当红色路径正常，有图片 就会正常显示，但是当路径为错，或图片为空，那就执行上面一行代码的图片，图片已引入。
自定义指令的钩子函数官网
自定义指令地址
blog.csdn.net/weixin_4797… 在此也有其他同学写到另外一种引入图片的方法
