如何在Vue中处理错误图片

如何在Vue中处理错误图片？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联公司专业IDC数据服务器托管提供商，专业提供成都服务器托管，服务器租用，遂宁托管服务器，遂宁托管服务器，成都多线服务器托管等服务器托管服务。

第一种方法，也就是百度到的最多的代码，就是给一张图片一个默认值。

第二种问题，如果页面中有很多地方都存在这个东西，那么在不同的页面中写很对是很麻烦的。

就使用到了VUe的指令。

这里分为了两种情况， 一种是直接加载默认图片，等图片加载完成之后再使用加载完成的图片 。

代码如下

// 如果自定义指令多的话，再重新开启一个文件专门写自定义指令 太乱了
//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
//指令名称为：real-img
// 通用错误图片的处理方法，或者也可以懒加载的样子
Vue.directive('real-img', async function (el, binding) {
 let imgURL = binding.value;//获取图片地址
 if (imgURL) {
  let exist = await imageIsExist(imgURL);
  if (exist) {
   el.setAttribute('src', imgURL);
  }
 }
});

/**
* 检测图片是否存在
* @param url
*/
let imageIsExist = function (url) {
 return new Promise((resolve) => {
  var img = new Image();
  img.onload = function () {
   if (this.complete == true) {
    console.log('资源加载');
    resolve(true);
    img = null;
   }
  }
  img.onerror = function () {
   console.log('资源error', img);
   resolve(false);
   img = null;
  }
  img.src = url;
 })
};

使用方式