如何在Vue中处理错误图片

　　介绍

如何在Vue中处理错误图片?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

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

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

就使用到了Vue的指令。

这里分为了两种情况,一种是直接加载默认图片,等图片加载完成之后再使用加载完成的图片。

代码如下

//,如果自定义指令多的话,再重新开启一个文件专门写自定义指令,太乱了//全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片//指令名称为:real-img//,通用错误图片的处理方法,或者也可以懒加载的样子 　　Vue.directive (& # 39; real-img& # 39;,, async  function  (el,绑定),{ 　　,let  imgURL =, binding.value;//获取图片地址 　　,if  (imgURL), { 　　let 才能;exist =, await  imageIsExist (imgURL); 　　if 才能;(存在),{ 　　,,el.setAttribute (& # 39; src # 39;,, imgURL); 　　,,} 　　,} 　　});/* * 　　*,检测图片是否存在 　　*,@param  url 　　*/let  imageIsExist =, function  (url), { 　　,return  new 承诺((解决),=祝辞,{ 　　var 才能;img =, new 图像(); 　　时间=img.onload 才能;function  (), { 　　,,if  (this.complete ==,真的),{ 　　,,,console.log(& # 39;资源加载& # 39;); 　　,,,解决(真正的); 　　,,,img =,空; 　　,,} 　　,,} 　　时间=img.onerror 才能;function  (), { 　　,,console.log(& # 39;资源错误# 39;,,img); 　　,才能解决(假); 　　,,img =,空; 　　,,} 　　url=img.src 才能;; 　　,}) 　　};

使用方式

& lt; div 类=癮ppd_d_ch_logo"比; 　　& lt; img  src=https://www.yisu.com/zixun/assets/img/error/app_d.png " v-real-img=" appDetail。图标" alt=" ">