Image
Besides the native features of img, support lazy load, custom placeholder and load failure, etc.
Basic usage
Indicate how the image should be resized to fit its container by fit, same as native object-fit.
Placeholder
Custom placeholder content when image hasn't loaded yet by slot = placeholder
Load Failed
Custom failed content when error occurs to image load by slot = error
Lazy Load
Use lazy load by loading = lazy. Image will load until scroll into view when set. You can indicate scroll container that adds scroll listener to by scroll-container. If undefined, will be the nearest parent container whose overflow property is auto or scroll.
Image Preview
Allow big image preview by setting preview-src-list prop. You can initialize the position of the first picture previewed by initial-index. The default initial position is 0.
Image Attributes
| Attribute | 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 |
| loading | Indicates how the browser should load the image, same as native | eager / lazy | — |
| 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 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 |
Image Viewer Events
| Event 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 |