Skip to main content
Version: v7

ion-img

shadow

Img は、タグがビューポートに表示されているときに画像をLazy Loadするタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは Intersection Observer を内部的に使用します。Intersection Observerは、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は setTimeout で処理されます。

基本的な使い方

プロパティ

alt

Descriptionこの属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。
Attributealt
Typestring | undefined
Defaultundefined

src

Description画像のURL。この属性は <img> 要素では必須です。
Attributesrc
Typestring | undefined
Defaultundefined

イベント

NameDescription
ionErrorimgの読み込みに失敗したときに発行されます。
ionImgDidLoad画像の読み込みが終了したときに発行されます。
ionImgWillLoadimg srcが設定されたときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
image内側の img 要素。

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.