Vue中错误图片的处理

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

在一个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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

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

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

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

如何优雅的处理Promise错误?

Promise的出现,成功的将广大前端开发者从回调地域的深渊中拯救了出来,而后还有Async/Await,这两者使得开发者更容易编写异步代码,然后当处理错误时,貌似就不是那么的美好了。

8种常见SQL错误用法

MySQL在2016年仍然保持强劲的数据库流行度增长趋势。越来越多的客户将自己的应用建立在MySQL数据库之上,甚至是从Oracle迁移到MySQL上来。但也存在部分客户在使用MySQL数据库的过程中遇到一些比如响应时间慢

如何使用 JSON.stringify() 去序列化一个 Error?

最近在做 Node 服务端需求的时候,遇到了几次服务端报错的问题。打 log 发现均是一些 Error,但是它们都没法很好地透传给前端浏览器,出现问题只能查看服务端机器的日志,调试起来非常不方便。思考了一下

避免那些可恶的cannot read property of undefined 错误

Uncaught TypeError: Cannot read property foo of undefined. 是一个我们在 JavaScript 开发中都遇到过的可怕错误。或许是某个 API 返回了意料外的空值,又或许是其它什么原因,这个错误是如此的普遍而广泛以至于我们无法判断

Js错误处理

当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:可能是语法错误,通常是程序员造成的编码错误或错别字;可能是拼写错误或语言中缺少的功能(可能由于浏览器差异);可能是由于来自服务器或用户的错误输出而导致的错误

Spring常犯的十大错误

我们正在解决这个常见错误,是因为 “非我所创” 综合症在软件开发领域很是常见。症状包括经常重写一些常见的代码,很多开发人员都有这种症状。虽然理解特定库的内部结构及其实现

10个最常见的JavaScript错误

为了可读性,上面错误的描述都是缩写后的。接下来会深入探讨一下,这些错误发生的原理,并且如何避免触发他们。如果你是一个JavaScript开发人员,可能你看到这个错误的次数,比你希望承认的次数还要多

Js中最常见的错误

最近查看了一些项目后,发现了几个最常见的JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”,你将会成为一个更好的开发者。

Web前端开发,必须规避的8个错误点!

现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性。我们收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站。

自定义错误及扩展错误

当我们在进行开发的时候,通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误,我们需要 HttpError,对于数据库操作错误,我们需要 DbError,对于搜索操作错误,我们需要 NotFoundError,等等

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

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

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