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 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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
简单实用的网站PHP缓存类实例
2014/07/18 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP实现八皇后算法
2019/05/06 PHP
奇妙的js
2007/09/24 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
微信小程序实现多图上传
2020/06/19 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
下载糗事百科的内容_python版
2008/12/07 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python 获取字符串MD5值方法
2018/05/29 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
python能开发游戏吗
2020/06/11 Python
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
农业项目建议书
2014/08/25 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
python实现简单的井字棋
2021/05/26 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers