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----文件操作
Jan 18 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 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的正则处理函数总结分析
2008/06/20 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP培训要多少钱
2017/06/06 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
详解python多线程之间的同步(一)
2019/04/03 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python数学形态学实例分析
2019/09/06 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
python如何修改文件时间属性
2021/02/05 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
GWT都有什么特性
2016/12/02 面试题
最新会计专业求职信范文
2014/01/28 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
导游词之凤凰古城
2019/10/22 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
CSS3实现指纹特效代码
2022/03/17 HTML / CSS