自定义指令处理图片加载失败

Vue中的自定义指令

在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

接下来我们就通过自定义指令的方式来处理图片加载失败或者加载未完成的状态

imageOnerror.js

import Vue from 'vue'
Vue.directive('error-image', async (el, binding) => {
	let imgUrl = binding.value // 获取想要加载图片的Url（自定义指令传过来的值）
	if(imgUrl){
		let exits = await imageIsExist(imgUrl){
			if(exits) {
				el.setAttribute('src', imgUrl)	
			}
		}
	}
})

/**
 * 检测图片是否存在
 * @param url
 */

let imageIsExist = (url)=> {
  return new Promise((resolve)=> {
    let img = new Image();
    // 这里不能使用箭头函数因为this需要指向img实例
    img.onload = function(){
      if(this.complete == true) {
        resolve(true);
        img = null
      }
    }
    img.onerror = ()=> {
      resolve(false)
      img = null
    }
    img.src = url
  })
}

从这里学习