Vue中错误图片的处理的实现代码
在一个Vue的PC项目中,要求给错误图片不要让它显示丑陋的图片,就要给图片写一个失败后的默认图片,
在这里写了两种方法,
第一种方法,也就是百度到的最多的代码,就是给一张图片一个默认值。
第二种问题,如果页面中有很多地方都存在这个东西,那么在不同的页面中写很对是很麻烦的。
就使用到了VUe的指令。
这里分为了两种情况,一种是直接加载默认图片,等图片加载完成之后再使用加载完成的图片。
代码如下
//如果自定义指令多的话,再重新开启一个文件专门写自定义指令太乱了 //全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片 //指令名称为:real-img //通用错误图片的处理方法,或者也可以懒加载的样子 Vue.directive('real-img',asyncfunction(el,binding){ letimgURL=binding.value;//获取图片地址 if(imgURL){ letexist=awaitimageIsExist(imgURL); if(exist){ el.setAttribute('src',imgURL); } } }); /** *检测图片是否存在 *@paramurl */ letimageIsExist=function(url){ returnnewPromise((resolve)=>{ varimg=newImage(); 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; }) };
使用方式
第二种是直接加载图片,等到加载失败的时候使用默认图。
/** *检测图片是否存在 *@paramurl */ letimageIsExist=function(url){ returnnewPromise((resolve)=>{ varimg=newImage(); 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',asyncfunction(el,binding){ letimgURL=binding.value;//获取图片地址 letrealURL=el.src; if(imgURL){ letexist=awaitimageIsExist(realURL); if(!exist){ el.setAttribute('src',imgURL); } } });
Vue文件中使用方式如下
很久了学习一点新东西还是感觉挺高兴的,Vue指令很多人都见过,但是到了用的时候总是没想到,还是百度看到改造了一点点。
一段js代码不需要引入在所有的页面中使用很容易的办到,可以把这一段js代码放到Vue.prototype上面。
之前一直在想这个问题,有什么方式可以让所有的代码都可以使用一段函数或者是什么的,看到了指令,还是要多看看文档,只有到了用的时候才可能想到自己曾经看到过这么一段话,再重新翻看文档使用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。