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
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 | — |
| 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 |
| 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 |
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 |
|---|---|
| placeholder | custom placeholder content when image hasn't loaded yet. |
| error | custom image load failed content. |
| viewer | custom content when image preview. |
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 |
| 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 |
Image Viewer Events
| Name | Description | Type |
|---|---|---|
| close | trigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop. | Function |
| switch | trigger when switching images. | Function |
| rotate 2.3.13 | trigger when rotating images. | Function |
Image Viewer Exposes
| Name | Description | Type |
|---|---|---|
| setActiveItem | manually switch image | Function |