## イメージ imgのネイティブ機能の他に、遅延ロード、カスタムプレースホルダ、ロード失敗などをサポートしています。 ### 基本的な使い方 ネイティブの [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)と同じように、`fit`で画像のサイズをコンテナに合わせてリサイズする方法を指定します。 ```html
{{ fit }}
``` ::: ### プレースホルダ :::demo 画像がまだ読み込まれていない場合のカスタムプレースホルダの内容を `slot = placeholder` で指定します。 ```html
Default
Custom
Loading...
``` ::: ### ロード失敗 :::demo `slot = error` で画像読み込みにエラーが発生した場合のカスタム失敗コンテンツ ```html
Default
Custom
``` ::: ### レイジーロード(遅延ロード) :::demo `lazy = true` で遅延ロードを利用します。設定すると、画像はビューにスクロールするまで読み込まれます。スクロールリスナーを追加するスクロールコンテナは `scroll-container` で指定できます。未定義の場合は、オーバーフロープロパティが auto または scroll である最も近い親コンテナを指定します。 ```html
``` ::: ### イメージプレビュー :::demo `previewSrcList` prop を設定することで大きなイメージのプレビューを許可します。 ```html
``` ::: ### 属性 | Attribute | Description | Type | Accepted values | Default | |---------- |-------- |---------- |------------- |-------- | | src | image source、ネイティブと同じ | string | — | - | | fit | 画像のサイズをコンテナに合わせてどのように変更するかを指定します。[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)と同じ | string | fill / contain / cover / none / scale-down | - | | alt | ネイティブalt | string | - | - | | referrer-policy | ネイティブreferrerPolicy | string | - | - | | lazy | 遅延ロードを使用するかどうか | boolean | — | false | | scroll-container | 遅延ロード時にスクロールリスナーを追加するコンテナ | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll | | preview-src-list | 大きな画像のプレビューを許可する | Array | — | - | | z-index | セットイメージプレビュー z-index | Number | — | 2000 | ### イベント | Event Name | Description | Parameters | |---------- |-------- |---------- | | load | ネイティブロードと同じ | (e: Event) | | error | ネイティブエラーと同じ | (e: Error) | ### スロット | Slot Name | Description | |---------|-------------| | placeholder | 画像の読み込み時にトリガ | | error | 画像の読み込み失敗した場合のトリガー |