メインコンテンツまでスキップ
バージョン: v8 (beta)

ion-img

shadow

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

基本的な使い方

プロパティ

alt

DescriptionThis attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
Attributealt
Typestring | undefined
Defaultundefined

src

DescriptionThe image URL. This attribute is mandatory for the <img> element.
Attributesrc
Typestring | undefined
Defaultundefined

イベント

NameDescriptionBubbles
ionErrorEmitted when the img fails to loadtrue
ionImgDidLoadEmitted when the image has finished loadingtrue
ionImgWillLoadEmitted when the img src has been settrue

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
imageThe inner img element.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.