# @wines/image

> The image @wines

Latest version **2.0.0** (published 2025-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wines/image
pnpm add @wines/image
yarn add @wines/image
bun add @wines/image
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-04-01 |
| First published | 2021-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=16.0.0 |
| Dependencies | 2 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

- npm: https://www.npmjs.com/package/@wines/image
- Repository: https://gitlab.itcjf.com/wines/image
- npm.io page: https://npm.io/package/@wines/image

## Dependencies (2)

- [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0
- [@wines/styles](https://npm.io/package/@wines/styles.md) 2.0.0

## Recent versions

- 2.0.0 (latest) — 2025-04-01
- 2.0.0-next.7 (next) — 2025-04-01
- 2.0.0-next.6 — 2025-03-06
- 2.0.0-next.5 — 2025-03-05
- 2.0.0-next.4 — 2025-03-05
- 2.0.0-next.3 — 2025-03-04
- 2.0.0-next.2 — 2025-02-28
- 2.0.0-next.1 — 2025-02-27
- 2.0.0-next.0 — 2025-02-27
- 1.5.1 — 2023-03-07
- 1.5.0 — 2022-11-22
- 1.4.0 — 2022-02-23
- 1.3.5 — 2021-12-03
- 1.3.2 — 2021-09-24
- 1.3.1 — 2021-04-25
- … 1 more at https://npm.io/package/@wines/image/versions

## README

# `@wines/image`

# Image 图片

图片。

## 使用指南

### 在 page.json 中引入组件

```json
{
  "navigationBarTitleText": "Image",
  "usingComponents": {
    "wux-row": "@wines/row",
    "wux-col": "@wines/row/col",
    "wux-image": "@wines/image"
  }
}
```

### 示例

```xml
<view class="page">
	<view class="page__hd">
		<view class="page__title">Image</view>
		<view class="page__desc">图片</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Shape</view>
		<wux-row>
			<wux-col span="4">
				<wux-image wux-class="image" shape="rounded" src="https://picsum.photos/750/750/?random&s=1" />
			</wux-col>
			<wux-col span="4">
				<wux-image
				 wux-class="image"
				 shape="circle"
				 src="https://picsum.photos/750/750/?random&s=2"
				 loading="Loading"
				/>
			</wux-col>
			<wux-col span="4">
				<wux-image wux-class="image" shape="thumbnail" src="https://picsum.photos/750/750/?random&s=3">
					<image src="https://loading.io/spinners/spinner/index.ajax-spinner-preloader.svg" slot="loading" />
				</wux-image>
			</wux-col>
		</wux-row>
		<view class="sub-title">Loading</view>
		<wux-row>
			<wux-col span="4">
				<wux-image wux-class="image" src="https://picsum.photos/750/750/?random&s=4" />
			</wux-col>
			<wux-col span="4">
				<wux-image wux-class="image" src="https://picsum.photos/750/750/?random&s=5" loading="Loading" />
			</wux-col>
			<wux-col span="4">
				<wux-image wux-class="image" src="https://picsum.photos/750/750/?random&s=6">
					<image src="https://loading.io/spinners/spinner/index.ajax-spinner-preloader.svg" slot="loading" />
				</wux-image>
			</wux-col>
		</wux-row>
		<view class="sub-title">Empty</view>
		<wux-row>
			<wux-col span="4">
				<wux-image wux-class="image" src="" />
			</wux-col>
			<wux-col span="4">
				<wux-image wux-class="image" src="" empty="Empty" />
			</wux-col>
			<wux-col span="4">
				<wux-image wux-class="image" src="">
					<image src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" slot="empty" />
				</wux-image>
			</wux-col>
		</wux-row>
		<view class="sub-title">Error</view>
		<wux-row>
			<wux-col span="4">
				<wux-image wux-class="image" src="error" />
			</wux-col>
			<wux-col span="4">
				<wux-image wux-class="image" src="error" error="Error" />
			</wux-col>
			<wux-col span="4">
				<wux-image wux-class="image" src="error">
					<image src="http://cdn.skyvow.cn/logo.png" slot="error" />
				</wux-image>
			</wux-col>
		</wux-row>
	</view>
</view>

```

## API

### Image props

| 参数           | 类型       | 描述                                                                                                 | 默认值      |
| -------------- | ---------- | ---------------------------------------------------------------------------------------------------- | ----------- |
| prefixCls      | `string`   | 自定义类名前缀                                                                                       | wux-image   |
| src            | `string`   | 图片资源地址                                                                                         | -           |
| mode           | `string`   | 图片裁剪、缩放的模式，可参考 [image](https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html) | scaleToFill |
| lazyLoad       | `boolean`  | 图片懒加载。只针对 page 与 scroll-view 下的 image 有效                                               | false       |
| shape          | `string`   | 形状，可选值为 normal、rounded、circle、thumbnail                                                    | normal      |
| width          | `any`      | 默认宽度，单位 px                                                                                    | 300         |
| height         | `any`      | 默认高度，单位 px                                                                                    | 225         |
| unmountOnEmpty | `boolean`  | 资源不存在时是否卸载组件                                                                             | false       |
| unmountOnError | `boolean`  | 资源加载失败时是否卸载组件                                                                           | false       |
| empty          | `string`   | 资源不存在的提示内容                                                                                 | -           |
| loading        | `string`   | 资源加载中的提示内容                                                                                 | -           |
| error          | `string`   | 资源加载失败的提示内容                                                                               | -           |
| bind:change    | `function` | 监听状态变化的回调函数                                                                               | -           |
| bind:load      | `function` | 资源加载完成时的回调函数                                                                             | -           |
| bind:error     | `function` | 资源加载失败时的回调函数                                                                             | -           |
| bind:click     | `function` | 点击事件                                                                                             | -           |

### Image slot

| 名称    | 描述                         |
| ------- | ---------------------------- |
| -       | 自定义内容                   |
| empty   | 自定义资源不存在的提示内容   |
| loading | 自定义资源加载中的提示内容   |
| error   | 自定义资源加载失败的提示内容 |

### Image externalClasses

| 名称      | 描述         |
| --------- | ------------ |
| wux-class | 根节点样式类 |

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