## Image Besides the native features of img, support lazy load, custom placeholder and load failure, etc. ### Basic Usage :::demo Indicate how the image should be resized to fit its container by `fit`, same as native [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。 ```html
{{ fit }}
``` ::: ### Placeholder :::demo Custom placeholder content when image hasn't loaded yet by `slot = placeholder` ```html
Default
Custom
Loading...
``` ::: ### Load Failed :::demo Custom failed content when error occurs to image load by `slot = error` ```html
Default
Custom
``` ::: ### Lazy Load :::demo Use lazy load by `lazy = true`. 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. ```html
``` ::: ### Attributes | Attribute | Description | Type | Accepted values | Default | |---------- |-------- |---------- |------------- |-------- | | src | Image source, same as native | string | — | - | | fit | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - | | alt | Native alt | string | - | - | | 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 | ### Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | load | Same as native load | (e: Event) | | error | Same as native error | (e: Error) | ### Slots | Slot Name | Description | |---------|-------------| | placeholder | Triggers when image load | | error | Triggers when image load failed |