Vue中错误图片的处理

时间: 2019-10-07阅读: 237标签: 错误

在一个Vue的PC项目中,要求给错误图片不要让它显示丑陋的图片,就要给图片写一个失败后的默认图片,


在这里写了两种方法,第一种方法,也就是百度到的最多的代码,就是给一张图片一个默认值。如果页面中有很多地方都存在这个东西,那么在不同的页面中写很对是很麻烦的。就使用到了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;
  })
};

使用方式

<div class="appd_d_ch_logo">
  <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">
</div>

 

第二种是直接加载图片,等到加载失败的时候使用默认图。

/**
* 检测图片是否存在
* @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;
  })
};



// 单独作用于应用模块的管理
// 传的是错误的图片
Vue.directive('err-img', async function (el, binding) {
  let imgURL = binding.value;//获取图片地址
  let realURL = el.src;
  if (imgURL) {
    let exist = await imageIsExist(realURL);
    if (!exist) {
      el.setAttribute('src', imgURL);
    }
  }
});

Vue文件中使用方式如下

<div class="appd_d_ch_logo">
      <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">
</div>


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/6308

升级webpack4错误处理

TypeError: Cannot read property vue of undefine。处理:由于vue-loader和webpack4.0未匹配,需要升级vue-loader, npm i vue-loader -D,并且修改配置build/webpack.base.conf.js,加入

web前端新手最容易出现的4个错误

错误:无论是JavaScript,还是在服务器上运行的代码,开发人员都需要测试并确认它是否可以正常工作,而不是在部署了之后,就认为它应该就能从一而终地运行。

CSS开发中的十大错误用法

自从接触前端软件开发以来,我发现开发猿一直在努力征服着CSS。 理由也很充分,开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行,而另一个DIV“浮”到左侧,感觉没有任何意义。

javascript如何屏蔽错误提示?

有时候大家来浏览网页的时候发现IE浏览器左下角总有个黄色错误标志,有时候更是直接弹出错误无法继续浏览页面,这样对于网站的正规性与权威性发展不利。

node端如何处理错误?

JavaScript的任何throw机制的使用都会引起异常,异常处理必须用try/catch来进行处理,否则nodejs进程会立即退出。同步的API会使用throw来报告错误。但是异步的API可能使用多种方法来报告错误---大多数异步API发生错误,采用callback方式来处理异常

Uncaught TypeError: Cannot set property \\\'onclick\\\' of null解决办法

如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set property \\\'onclick\\\' of null,分析解决办法如下:第一种解决办法直接js文件放在页面底部加载,第二种window onload()包裹起来

Js初学者容易犯的几个错误

JavaScript 是对初学者比较友好的一门编程语言,基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言,对数据类型没有太多的限制,写起来非常灵活

Js中try/catch/finally 语句

try/catch/finally 语句用于处理代码中可能出现的错误信息。当错误发生时, JavaScript 会停止执行,并生成一个错误信息。使用throw语句 来创建自定义消息(抛出异常)。如果你将 throw 和 try 、 catch一起使用,就可以控制程序输出的错误信息。

前端开发中Js常见错误

错误分为两种: (1)代码错误:这种错误浏览器会报错,可以根据错误类型去排错 (2)逻辑错误:这种错误浏览器不会报错,但是可以使用断点进行调试排错

javascript如何抛出错误?

throw语句用来抛出一个用户自定义的异常。当前函数的执行将被停止(throw之后的语句将不会执行),并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块,程序将会终止。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全