Image 图片

使用场景

用来快捷展示一张图片。

示例

基本用法

inline

function Basic() { return ( <Group> <Image src="https://img.alicdn.com/tfs/TB1gjPyp9slXu8jSZFuXXXg7FXa-750-272.png" width="400px" /> </Group> ); }

function Basic() {
  return (
    <Group>
      <Image src="https://img.alicdn.com/tfs/TB1gjPyp9slXu8jSZFuXXXg7FXa-750-272.png" width="400px" />
    </Group>
  );
}

图片尺寸

inline

function Size() { const sourceUrl = 'https://img.alicdn.com/tfs/TB1atWRDgHqK1RjSZFkXXX.WFXa-460-462.png'; return ( <Group> <Image width="100px" height="100px" src={sourceUrl} /> <Image width="150px" height="150px" src={sourceUrl} /> </Group> ); }

function Size() {
  const sourceUrl = 'https://img.alicdn.com/tfs/TB1atWRDgHqK1RjSZFkXXX.WFXa-460-462.png';
  return (
    <Group>
      <Image width="100px" height="100px" src={sourceUrl} />
      <Image width="150px" height="150px" src={sourceUrl} />
    </Group>
  );
}

备选图片

inline

function Fallback() { return <Image src="notfound.png" fallbackSrc="https://via.placeholder.com/150" />; }

function Fallback() {
  return <Image src="notfound.png" fallbackSrc="https://via.placeholder.com/150" />;
}

API

字段	描述
fallbackSrc	string 备选图片地址
fallback	ReactElement<any, string | JSXElementConstructor<any>> 备选渲染元素
width	string 图片宽度
height	string 图片高度
className	string
style	CSSProperties
src	string 图片地址
onLoad	any 图片加载后的回调
onError	any 图片加载出错的回调
ignoreFallback	boolean 是否忽略 fallback