# @huteming/ui-image

> > 图片容器

Latest version **4.0.0** (published 2020-02-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install @huteming/ui-image
pnpm add @huteming/ui-image
yarn add @huteming/ui-image
bun add @huteming/ui-image
```

## 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 | 4.0.0 |
| Published | 2020-02-05 |
| First published | 2020-02-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 818.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | huteming |

## Links

- npm: https://www.npmjs.com/package/@huteming/ui-image
- npm.io page: https://npm.io/package/@huteming/ui-image

## Dependencies (1)

- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^2.1.0

## Recent versions

- 4.0.0 (latest) — 2020-02-05

## README

> 图片容器

-------------

## 引入

```javascript
import { TmImage } from '@huteming/ui'

Vue.use(TmImage)
// Vue.component(TmImage.name, TmImage)
```

## 例子

```html
<tm-image :src="src" style="width: 100px; height: 100px;"></tm-image>
```

## API

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------|-------|---------|-------|--------|
| src | 图片地址 | `String` | | |
| fit | 确定图片如何适应容器框，同原生 object-fit | string | fill / contain / cover / none / scale-down | |
| lazy | 是否开启懒加载 | boolean | | false |
| hold | 初始为添加图片样式，src改变后会被覆盖 | boolean | | false |
| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | | 最近一个 overflow 值为 auto 或 scroll 的父元素 |

## Events

| 事件名称 | 说明 | 回调参数 |
|---------|----------|-------------|
| load | 图片加载成功触发 | (e: Event) |
| error | 图片加载失败触发 | (e: Error) |

## Slots

| 名称 | 说明 |
|------------|----------|
| placeholder | 添加图片样式占位 |
| loading | 加载中的内容 |
| error | 加载失败的内容 |

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