async-img v1.0.3

加强版 img 标签，默认为loading效果 , 组件挂载后异步加载真实图片

例子

vue环境下使用

安装:

$ npm i async-img

配置：

import asyncImg from 'async-img'
Vue.use(asyncImg)

使用:

<Img

   v-if="show"

   src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" // 真实图片地址

   defaultSrc="./logo.png" // 默认图片地址, 可选

/>

源码:

<template>
  <img
    :src="
      defaultSrc ||
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190402%2Fc9eeb921c1a440fe812c310f10697ba3.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653552975&t=30434d19bff2b4db39b9d3fc8730e10a'
    "
    ref="img"
    alt=""
  />
</template>

<script>
export default {
  name: "Img",
  props: ["src", "defaultSrc"],
  mounted() {
    const img = new Image();
    img.addEventListener("load", () => {
      this.$refs.img.src = this.src;
      img = null;
    });
    img.src = this.src;
  },
};
</script>