vue指令处理图片加载错误，判断图片可否加载成功

超、凢脫俗 2022-11-17 13:47 590阅读 0赞

# vue指令处理图片加载错误，判断图片可否加载成功 #

## v-real-img 指令 ##

*  全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
 *  在网络慢的时候，加载图片多的时候，可以达到占位图的效果
 *  使用方法：`<img src="默认图片.png" v-real-img="真实图片.png">`

/** * 全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片 * 在网络慢的时候，加载图片多的时候，可以达到占位图的效果 * 使用方法：<img src="默认图片.png" v-real-img="真实图片.png"> */
    Vue.directive('real-img', async function (el, binding) { //指令名称为：real-img
      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) { 
            resolve(true);
            img = null;
          }
        }
        img.onerror = function () { 
          resolve(false);
          img = null;
        }
        img.src = url;
      })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，590人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue指令处理图片加载错误，判断图片可否加载成功

vue指令处理图片加载错误，判断图片可否加载成功 v-real-img 指令全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img

超、凢脫俗/ 2022年11月17日 13:47/ 0 赞/ 591 阅读

相关 vue图片懒加载

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。 ![Center][] 请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板

矫情吗；*/ 2022年06月09日 13:08/ 0 赞/ 455 阅读

相关图片加载

[Android四大图片缓存（Imageloader,Picasso,Glide,Fresco）原理、特性对比][Android_Imageloader_Picasso_Gl

川长思鸟来/ 2022年06月08日 07:30/ 0 赞/ 329 阅读

相关 Ionic 图片加载出错处理

参考资料: [html5没有图片，就默认一张][html5] <!DOCTYPE html> <html> <head> <meta htt

心已赠人/ 2022年05月11日 09:18/ 0 赞/ 185 阅读

相关 vue 图片懒加载

安装、引用、配置三部曲 1、安装\` npm install vue-lazyload --save-dev 2、在main.js中引用 impor

傷城~/ 2022年04月23日 12:02/ 0 赞/ 419 阅读

相关 vue + 图片加载 + 默认图片

需求：图片数据未返回 + 图片数据返回为空 + 图片加载出错时，图片采用默认图片展示。解决：先判断返回数据是否有，再通过img 的 load事件判断是否加载完成

╰+哭是因爲堅強的太久メ/ 2022年03月10日 18:20/ 0 赞/ 451 阅读

相关 vue图片懒加载

介绍： vue-lazyload主要应用于图片延迟加载。包含如下的特点：小巧轻便，功能强大，易于使用可以用于加载任何图像类型支持Vue 1.0和Vue 2.0

缺乏、安全感/ 2021年12月07日 09:59/ 0 赞/ 653 阅读

相关 javascript 修改图片地址（判断图片是否加载成功）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

àì夳堔傛蜴生んèń/ 2021年11月24日 01:50/ 0 赞/ 312 阅读

相关 vue 图片懒加载和懒加载原理

在真实图片得到之前,展示懒加载设置的图片 1、安装 cnpm i vue-lazyload -S 2、main.js

你的名字/ 2021年07月24日 20:08/ 0 赞/ 897 阅读

相关如何判断网页中图片加载成功或者失败？

如何判断网页中图片加载成功或者失败？判断网页中图片加载成功或者失败的方法：页面上有用户自定义图片的时候经常会出现用户定义的图片特别是站外图片被删除或无法访问，因此，需...

朱雀/ 2020年07月02日 07:14/ 0 赞/ 818 阅读