Skip to main content
Version: v5

ion-img

Img is a tag that will lazily load an image when ever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses Intersection Observer internally, which is supported in most modern browser, but falls back to a setTimeout when it is not supported.

Usage

<ion-list>
<ion-item *ngFor="let item of items">
<ion-thumbnail slot="start">
<ion-img [src]="item.src"></ion-img>
</ion-thumbnail>
<ion-label>{{item.text}}</ion-label>
</ion-item>
</ion-list>

Properties

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

Events

NameDescriptionBubbles
ionErrorEmitted when the img fails to loadYes
ionImgDidLoadEmitted when the image has finished loadingYes
ionImgWillLoadEmitted when the img src has been setYes

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
imageThe inner img element.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.