vue自定义指令 - v-real-img

nunumaymax

已于 2022-08-02 11:41:09 修改

阅读量405

点赞数

分类专栏： vue2 文章标签： vue.js 前端

于 2022-08-02 11:39:07 首次发布

原文链接：https://blog.csdn.net/qq_32442967/article/details/115556278

版权

vue2 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

本文介绍了一个Vue自定义指令`v-real-img`的实现，该指令用于在图片加载时检查其是否能成功加载。如果图片加载成功，它将替换默认图片显示；在网络延迟或图片数量多的情况下，此功能可以提供占位图效果。文章通过示例代码展示了如何在模板中使用该指令，并提供了检测图片是否存在的辅助函数。

摘要由CSDN通过智能技术生成

v-real-img

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

<template>
	<div class="game-card flex pointer">
		<!-- <img :src="require(row.src) /> -->
    	<img src="~@/assets/images/default-game-img.png" v-real-img="row.src" />
    </div>
</template>

//  检测图片是否存在
const imageIsExist = function (url) {
  return new Promise((resolve) => {
    let img = new Image();
    img.onload = function () {
      if (this.complete === true) {
        resolve(true)
        img = null
      }
    }

    img.onerror = function () {
      resolve(false)
      img = null
    }

    img.src = url
  })
}


export default {
  name: "game-card",
  props: {
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
 
  directives: {
  	// 自定义指令：
    "real-img": {
      async inserted(el, binding) {
        let imgUrl = binding.value;
        if (imgUrl) {
          let exist = await imageIsExist(imgUrl);
          if (exist) {
            el.setAttribute("src", imgUrl)
          }
        }
      }
    }
  }
};