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

ANGULAR

<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>

REACT

import React from 'react';
import { IonList, IonItem, IonThumbnail, IonImg, IonLabel, IonContent } from '@ionic/react';

type Item = {
  src: string;
  text: string;
};
const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];

export const ImgExample: React.FC = () => (
  <IonContent>
    <IonList>
      {items.map((image, i) => (
        <IonItem key={i}>
          <IonThumbnail slot="start">
            <IonImg src={image.src} />
          </IonThumbnail>
          <IonLabel>{image.text}</IonLabel>
        </IonItem>
      ))}
    </IonList>
  </IonContent>
);

STENCIL

import { Component, h } from '@stencil/core';

@Component({
  tag: 'img-example',
  styleUrl: 'img-example.css',
})
export class ImgExample {
  private items = [
    {
      text: 'Item 1',
      src: '/path/to/external/file.png',
    },
    {
      text: 'Item 2',
      src: '/path/to/external/file.png',
    },
    {
      text: 'Item 3',
      src: '/path/to/external/file.png',
    },
  ];

  render() {
    return [
      <ion-list>
        {this.items.map((item) => (
          <ion-item>
            <ion-thumbnail slot="start">
              <ion-img src={item.src}></ion-img>
            </ion-thumbnail>
            <ion-label>{item.text}</ion-label>
          </ion-item>
        ))}
      </ion-list>,
    ];
  }
}

VUE

<template>
  <ion-list>
    <ion-item v-for="item in items" :key="item.src">
      <ion-thumbnail slot="start">
        <ion-img :src="item.src"></ion-img>
      </ion-thumbnail>
      <ion-label>{{item.text}}</ion-label>
    </ion-item>
  </ion-list>
</template>

<script>
  import { IonImg, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: { IonImg, IonItem, IonLabel, IonList, IonThumbnail },
    setup() {
      const items = [
        {
          text: 'Item 1',
          src: '/path/to/external/file.png',
        },
        {
          text: 'Item 2',
          src: '/path/to/external/file.png',
        },
        {
          text: 'Item 3',
          src: '/path/to/external/file.png',
        },
      ];
      return { items };
    },
  });
</script>

Properties

alt

Description	This 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.
Attribute	alt
Type	string ｜ undefined
Default	undefined

src

Description	画像のURL。この属性は <img> 要素では必須です。
Attribute	src
Type	string ｜ undefined
Default	undefined

Events

Name	Description
ionError	imgの読み込みに失敗したときに発行されます。
ionImgDidLoad	画像の読み込みが終了したときに発行されます。
ionImgWillLoad	img srcが設定されたときに発行されます。

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
image	内側の img 要素。

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.