ion-img
Ionic4项目中我们可以使用Ionic4媒体组件ion-img对项目进行布局。 ion-img官方文档地址:https://ionicframework.com/docs/api/imgImg 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.
ion-img 用法(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>
import React from 'react';
import { IonList, IonItem, IonThumbnail, IonImg, IonLabel } from '@ionic/react';
type Item = {
src: string;
text: string
};
const items: Item[] = [];
const Example: React.SFC<{}> = () => (
<IonList>
{items.map(({src, text}) =>
<IonItem>
<IonThumbnail slot="start">
<IonImg src={src}>IonImg>
IonThumbnail>
<IonLabel>{text}}IonLabel>
IonItem>
)}
IonList>
);
export default Example
<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>
ion-img 属性(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 |
src | |
Description | The image URL. This attribute is mandatory for the element. |
Attribute | src |
Type | string | undefined |
ion-img 事件(Events)
Name | Description |
---|---|
ionError | Emitted when the img fails to load |
ionImgDidLoad | Emitted when the image has finished loading |
ionImgWillLoad | Emitted when the img src has been set |