ion-img
Deprecated
ion-img is deprecated and will be removed in Ionic 10. Use a native <img> tag with loading="lazy" instead. Refer to the migration guide for details on replacing events and styling.
Img は、タグがビューポートに表示されているときに画像をLazy Loadするタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは Intersection Observer を内部的に使用します。Intersection Observerは、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は setTimeout で処理されます。
基本的な使い方
プロパティ
alt
| Description | この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。 |
| Attribute | alt |
| Type | string ｜ undefined |
| Default | undefined |
src
| Description | 画像のURL。この属性は <img> 要素では必須です。 |
| Attribute | src |
| Type | string ｜ undefined |
| Default | undefined |
イベント
| Name | Description | Bubbles |
|---|---|---|
ionError | imgの読み込みに失敗したときに発行されます。 | true |
ionImgDidLoad | 画像の読み込みが終了したときに発行されます。 | true |
ionImgWillLoad | img srcが設定されたときに発行されます。 | true |
メソッド
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
image | 内側の img 要素。 |
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
No slots available for this component.