Image 图片
图片容器，在保留所有原生 img 的特性下，支持懒加载，自定义占位、加载失败等
基础用法
占位内容
加载失败
懒加载
图片预览
Image API
Image Attributes
| Name | 说明 | 类型 | Default |
|---|---|---|---|
src | image source, same as native. | string | — |
fit | indicate how the image should be resized to fit its container, same as object-fit. | 'fill' | 'contain' | 'cover' | 'none' | 'scale'-down' | — |
hide-on-click-modal | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. | boolean | false |
lazy | whether to use lazy load. | boolean | false |
scroll-container | the container to add scroll listener when using lazy load. | string | HTMLElement | the nearest parent container whose overflow property is auto or scroll. |
alt | native attribute alt. | string | — |
referrer-policy | native attribute referrerPolicy. | string | — |
preview-src-list | allow big image preview. | string[] | — |
z-index | set image preview z-index. | number | — |
initial-index | initial preview image index, less than the length of url-list. | number | 0 |
preview-teleported | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to true. | boolean | false |
Image Events
| Name | 说明 | Type |
|---|---|---|
load | same as native load. | (e: Event) => void |
error | same as native error. | (e: Error) => void |
switch | trigger when switching images. | (index: number) => void |
close | trigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop. | () => void |
Image Slots
| 插槽名 | 说明 |
|---|---|
placeholder | triggers when image load. |
error | triggers when image load failed. |
viewer | description of the image. |
Image Viewer API
Image Viewer Attributes
| Name | 说明 | 类型 | Default |
|---|---|---|---|
url-list | preview link list. | string[] | [] |
z-index | preview backdrop z-index. | number | string | — |
initial-index | the initial preview image index, less than or equal to the length of url-list. | number | 0 |
infinite | whether preview is infinite. | boolean | true |
hide-on-click-modal | whether user can emit close event when clicking backdrop. | boolean | false |
teleported | image 自身是否插入至 body 元素上。 A nested parent element attribute transform should have this attribute set to true. | boolean | false |
Image Viewer Events
| 事件名 | 说明 | Type |
|---|---|---|
close | trigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop. | () => void |
switch | trigger when switching images. | (index: number) => void |