nuxt服务端渲染 vue检测图片加载失败onerror时，自定义指令处理

快来打我* 2022-11-15 12:57 150阅读 0赞

# nuxt服务端渲染 vue检测图片加载失败onerror时，自定义指令处理 #

全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片。  
在网络慢的时候，加载图片多的时候，可以达到占位图的效果

// plugins/directive.js
    import Vue from "vue";
    
    /** * 全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为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;
      })
    }
    
    // 在nuxt.config.js 中配置
    {  src: "~/plugins/directive.js", ssr: false}
    
    // index.vue中使用
    <img src="图片占位地址.png"
    v-real-img="图片真实地址.png"
    alt="">