Vue中错误图片的处理的实现代码


Posted in Javascript onNovember 07, 2019

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

Vue中错误图片的处理的实现代码

在这里写了两种方法,

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

Vue中错误图片的处理的实现代码

Vue中错误图片的处理的实现代码

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

就使用到了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>

很久了学习一点新东西还是感觉挺高兴的,Vue指令很多人都见过,但是到了用的时候总是没想到,还是百度看到改造了一点点。

一段js代码不需要引入在所有的页面中使用很容易的办到,可以把这一段js代码放到Vue.prototype上面。

之前一直在想这个问题,有什么方式可以让所有的代码都可以使用一段函数或者是什么的,看到了指令,还是要多看看文档,只有到了用的时候才可能想到自己曾经看到过这么一段话,再重新翻看文档使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
vue 实现购物车总价计算
Nov 06 #Javascript
JavaScript原型式继承实现方法
Nov 06 #Javascript
vue点击自增和求和的实例代码
Nov 06 #Javascript
解决vue 表格table列求和的问题
Nov 06 #Javascript
JavaScript如何借用构造函数继承
Nov 06 #Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 #Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 #Javascript
You might like
深入浅析Yii admin的权限控制
2016/08/31 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python实现的knn算法示例
2018/06/14 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
python轮询机制控制led实例
2020/05/03 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
python中time.ctime()实例用法
2021/02/03 Python
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
医院科室评语
2015/01/04 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书