Image
Besides the native features of img, support lazy load, custom placeholder and load failure, etc.
Basic Usage
Placeholder
Load Failed
Lazy Load
TIP
Native loading has been supported since2.2.3, you can use loading = "lazy" to replace lazy = true.
If the current browser supports native lazy loading, the native lazy loading will be used first, otherwise will be implemented through scroll.
Image Preview
Image API
Image Attributes
| Name | Description | Type | 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 |
loading2.2.3 | Indicates how the browser should load the image, same as native | 'eager' | 'lazy' | — |
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 |
close-on-press-escape | whether the image-viewer can be closed by pressing ESC | boolean | true |
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 | Description | 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
| Name | Description |
|---|---|
placeholder | custom placeholder content when image hasn't loaded yet. |
error | custom image load failed content. |
viewer | description of the image. |
Image Viewer API
Image Viewer Attributes
| Name | Description | Type | 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 | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to true. | boolean | false |
zoom-rate | the zoom rate of the image viewer zoom event | number | 1.2 |
Image Viewer Events
| Name | Description | 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 |
Image Viewer Methods
| Method | Description | Parameters |
|---|---|---|
| setActiveItem | manually switch image | index of the image to be switched to, starting from 0 |
三咲智子
云游君
JeremyWuuuuu
qiang
btea
Xc
msidolphin
kooriookami
Alan Wang
C.Y.Kun
Aex
cx33
Lucuai
Delyan Haralanov
bqy_fe
程成
啝裳
zycoJamie
SongWuKong
cregis0073
Esteban Fuentealba
Hades-li
zz
류한경
iamkun