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代码
Mar 10 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 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
MySQL修改密码方法总结
2008/03/25 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python重试装饰器示例
2014/02/11 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
高一英语教学反思
2014/01/22 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
入党申请自荐书范文
2014/02/11 职场文书
干部下基层实施方案
2014/03/14 职场文书
感恩教育活动总结
2014/05/05 职场文书
叶问观后感
2015/06/15 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers