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

超、凢脫俗 2022-11-17 13:47 618阅读 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 条评论，618人围观）

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

相关阅读

相关 vue加载网络图片

在Vue.js中加载网络图片通常是通过<img>元素来完成的。你可以使用Vue的数据绑定来将图片的URL动态地绑定到<img>元素的src属性上。以下是一个简单的示例：首先

淩亂°似流年/ 2024年02月22日 01:57/ 0 赞/ 131 阅读

相关 Vue3实现图片懒加载及自定义懒加载指令

Vue3实现图片懒加载及自定义懒加载指令前言 1.使用vue3-lazyload插件 2.自定义v-lazy懒加载指令 2.1 使用use

我会带着你远行/ 2023年10月14日 18:14/ 0 赞/ 83 阅读

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

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

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

相关 vue图片懒加载

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

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

相关图片加载

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

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

相关 vue 图片懒加载

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

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

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

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

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

相关 vue图片懒加载

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

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

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

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

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