# image (w-image)

- **Import**: `WImage` from `win-design-next`
- **Tag**: `<w-image>`
- **说明**: Image 图片
- **分类**: data-display
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/image.md`

## API

## Image API

### Attributes

| 属性名                | 说明                                                                                                                      | 类型                                                                    | 默认值 |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------ |
| src                   | 图片源地址，同原生属性一致                                                                                                | ^[string]                                                               | ''     |
| fit                   | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)                  | ^[enum]`'' \| 'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | ''     |
| hide-on-click-modal   | 当开启 preview 功能时，是否可以通过点击遮罩层关闭 preview                                                                 | ^[boolean]                                                              | false  |
| loading               | 浏览器加载图像的策略，和 [浏览器原生](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)能力一致 | ^[enum]`'eager' \| 'lazy'`                                              | —      |
| lazy                  | 是否使用懒加载                                                                                                            | ^[boolean]                                                              | false  |
| scroll-container      | 开启懒加载功能后，监听 scroll 事件的容器 默认情况下，开启懒加载功能后，监听 scroll 事件的容器                             | ^[string] / ^[object]`HTMLElement`                                      | —      |
| alt                   | 原生属性 `alt`                                                                                                            | ^[string]                                                               | —      |
| referrerpolicy        | 原生属性 [referrerPolicy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/referrerPolicy)。             | ^[string]                                                               | —      |
| crossorigin           | 原生属性 [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)                          | ^[enum]`'' \| 'anonymous' \| 'use-credentials'`                         | —      |
| preview-src-list      | 开启图片预览功能                                                                                                          | ^[object]`string[]`                                                     | []     |
| z-index               | 设置图片预览的 z-index                                                                                                    | ^[number]                                                               | —      |
| initial-index         | 初始预览图像索引，小于 `url-list` 的长度                                                                                  | ^[number]                                                               | 0      |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Image Viewer                                                                                    | ^[boolean]                                                              | true   |
| preview-teleported    | image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 `true`                               | ^[boolean]                                                              | false  |
| infinite              | 是否可以无限循环预览                                                                                                      | ^[boolean]                                                              | true   |
| zoom-rate             | 图像查看器缩放事件的缩放速率。                                                                                            | ^[number]                                                               | 1.2    |
| min-scale             | 图像查看器缩放事件的最小缩放比例                                                                                          | ^[number]                                                               | 0.2    |
| max-scale             | 图像查看器缩放事件的最大缩放比例                                                                                          | ^[number]                                                               | 7      |

### Events

| 事件名 | 说明                                                               | 类型                                 |
| ------ | ------------------------------------------------------------------ | ------------------------------------ |
| load   | 图片加载成功触发                                                   | ^[Function]`(e: Event) => void`      |
| error  | 图片加载失败触发                                                   | ^[Function]`(e: Event) => void`      |
| switch | 切换图像时触发。                                                   | ^[Function]`(index: number) => void` |
| close  | 当点击 X 按钮或者在`hide-on-click-modal`为 true 时点击遮罩层时触发 | ^[Function]`() => void`              |
| show   | 当 Viewer 显示时触发                                               | ^[Function]`() => void`              |

### Slots

| 插槽名      | 说明                                 | 类型                                                                                                                                                                      |
| ----------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| placeholder | 当图像尚未加载时，自定义的占位符内容 | -                                                                                                                                                                         |
| error       | 自定义图像加载失败的内容             | -                                                                                                                                                                         |
| viewer      | 当图像预览时自定义内容               | -                                                                                                                                                                         |
| progress    | 图片预览时自定义进度条内容           | ^[object]`{ activeIndex: number, total: number }`                                                                                                                         |
| toolbar     | 当图像预览时，自定义工具栏内容       | ^[object]`{actions: (action: ImageViewerAction, options?: ImageViewerActionOptions ) => void, prev: ()=> void, next: () => void,reset: () => void, activeIndex: number }` |

### Exposes

| 属性名      | 说明             | 类型                    |
| ----------- | ---------------- | ----------------------- |
| showPreview | 手动打开大图预览 | ^[Function]`() => void` |
