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 since 2.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
Manually Open Preview 2.9.4
Custom Toolbar 2.9.4
Custom progress 2.9.4
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. | enum | '' |
| hide-on-click-modal | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. | boolean | false |
| loading 2.2.3 | Indicates how the browser should load the image, same as native. | enum | — |
| lazy | whether to use lazy load. | boolean | false |
| scroll-container | the container to add scroll listener when using lazy load. By default, the container to add scroll listener when using lazy load. | string / object | — |
| alt | native attribute alt. | string | — |
| referrerpolicy | native attribute referrerPolicy. | string | — |
| crossorigin | native attribute crossorigin. | enum | — |
| preview-src-list | allow big image preview. | object | [] |
| 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 |
| infinite | whether the viewer preview is infinite. | boolean | true |
| zoom-rate | the zoom rate of the image viewer zoom event. | number | 1.2 |
| scale 2.11.3 | the preview image scale. | number | 1 |
| min-scale 2.4.0 | the min scale of the image viewer zoom event. | number | 0.2 |
| max-scale 2.4.0 | the max scale of the image viewer zoom event. | number | 7 |
| show-progress 2.9.4 | whether to display the preview image progress content. | boolean | false |
Image Events
| Name | Description | Type |
|---|---|---|
| load | same as native load. | Function |
| error | same as native error. | Function |
| switch | trigger when switching images. | Function |
| close | trigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop. | Function |
| show | trigger when the viewer displays | Function |
Image Slots
| Name | Description | Type |
|---|---|---|
| placeholder | custom placeholder content when image hasn't loaded yet. | - |
| error | custom image load failed content. | - |
| image viewer slots | when you allow big image preview, image viewer slots all can be used. | - |
Image Exposes
| Name | Description | Type |
|---|---|---|
| showPreview 2.9.4 | manually open preview big image | Function |
Image Viewer API
Image Viewer Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| url-list | preview link list. | object | [] |
| 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 2.2.27 | the zoom rate of the image viewer zoom event. | number | 1.2 |
| scale 2.11.3 | the preview image scale. | number | 1 |
| min-scale 2.4.0 | the min scale of the image viewer zoom event. | number | 0.2 |
| max-scale 2.4.0 | the max scale of the image viewer zoom event. | number | 7 |
| close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | boolean | true |
| show-progress 2.9.4 | whether to display the preview image progress content | boolean | false |
Image Viewer Events
| Name | Description | Type |
|---|---|---|
| close | trigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop. | Function |
| error 2.11.3 | same as native error. | Function |
| switch | trigger when switching images. | Function |
| rotate 2.3.13 | trigger when rotating images. | Function |
Image Viewer Slots
| Name | Description | Type |
|---|---|---|
| viewer | custom content | - |
| progress 2.9.4 | custom progress content (Priority is higher than show-progress prop) | object |
| toolbar 2.9.4 | custom toolbar content | object |
| viewer-error 2.11.3 | custom image load failed content. | object |
Image Viewer Exposes
| Name | Description | Type |
|---|---|---|
| setActiveItem | manually switch image | Function |
Type Declarations
Show declarations
ts
type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise'
type ImageViewerActionOptions = {
enableTransition?: boolean
zoomRate?: number
rotateDeg?: number
}Source
Contributors
