# async-img

> 异步加载图片

Latest version **1.0.3** (published 2022-04-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install async-img
pnpm add async-img
yarn add async-img
bun add async-img
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-04-26 |
| First published | 2022-04-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mjt123 |
| Maintainers | mjt123 |
| Keywords | 异步加载图片, img |

## Links

- npm: https://www.npmjs.com/package/async-img
- npm.io page: https://npm.io/package/async-img

## Recent versions

- 1.0.3 (latest) — 2022-04-26
- 1.0.2 — 2022-04-26
- 1.0.1 — 2022-04-26
- 1.0.0 — 2022-04-26

## README

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

## 例子

vue环境下使用

安装:

```com
$ npm i async-img
```



配置：

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

使用:

```vue
<Img

   v-if="show"

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

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

/>
```



源码:

```vue
<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>
```

---
_Source: https://npm.io/package/async-img · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._