Image

阿里内部同学推荐使用 @ali/rax-picture，对图片尺寸有很多内置的优化策略

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

用于展示图片

安装

$ npm install rax-image --save

引用

import Image from 'rax-image';

属性

| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 | | -------------- | ------------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | source | object: { width: string, height: string, uri: string} | - | true | 设置图片的 uri。height和width为可选项，优先级低于style上的同名属性，一般高于其他CSS中的同名属性。 | | | style | object: { width: number height: number } | - | true | 图片样式 width 和 height 为必填属性，否则图片无法正常展示，可以补充其他属性 | | | fallbackSource | object: { width: string, height: string, uri: string} | - | false | 备用图片的 uri（当主图加载失败时加载）。height和width为可选项，优先级低于style上的同名属性，一般高于其他CSS中的同名属性。 | | | loading | string: 'eager' 'lazy' | eager | false | 客户端如何加载图片，其中 Web 下需要浏览器原生支持loading属性。 | | | resizeMode | string： 'contain' 'cover' 'stretch' | - | false | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小 | | | mode | String: | scaleToFill | false | 小程序中的图片模式，可选项更多 | | | quality | string: 'original' 'normal' 'low' 'high' 'auto' | - | false | 图片质量 | | | placeholder | string | - | false | 占位图的 URL，在图片下载过程中将展示占位图， 图片下载完成后将显示 source 中指定的图片。 | | | onClick | function | - | false | 点击图片时的回调函数 | | | onLoad | function | - | false | 图片加载成功的回调函数 | | | onError | function | - | false | 图片加载失败的回调函数 | | | src | string | - | false | 图片下载完成后将显示 src 中指定的图片。 | |

onLoad onError 返回

当完成图片加载成功/失败时，将分别触发 onLoad/onError 中的回调函数 function(event) => {}

weex 下（iOS/Android）

| 成员 | 类型 | 描述 | | ------------------ | --------- | --------------------------------------------------- | | success | boolean | 标记图片是否成功加载，成功为 1/true，失败为 0/false | | size | object | 加载的图片大小对象 | | size.naturalWidth | number | 图片宽度，如果图片加载失败则为 0/-1 | | size.naturalHeight | number | 图片高度，如果图片加载失败则为 0/-1 |

Web 下是 web 原生的 Event 事件

| 成员 | 类型 | 描述 | | -------------------- | -------- | ------------ | | target | dom | 图片自身元素 | | target.naturalWidth | number | 图片宽度 | | target.naturalHeight | number | 图片高度 |

小程序下

| 成员 | 类型 | 描述 | | ------------- | -------- | ---------------- | | type | string | 事件类型 | | detail | object | 点击位置信息 | | target | object | 点击对象属性信息 | | currentTarget | object | 同上 |

快应用下

| 成员 | 类型 | 描述 | | -------------------- | -------- | ------------ | | target | object | 图片自身元素 | | target.data.width | number | 图片宽度 | | target.data.height | number | 图片高度 |

示例

普通示例

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Image from '../src/index';

const App = () => {
  const imageRef = useRef(null);
  return (
    <Image
      ref={imageRef}
      source={{
        uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
      }}
      style={{
        height: '68rpx',
        width: '67rpx',
      }}
    />
  );
};

render(<App />, document.body, { driver: DriverUniversal });

使用 fallbackSource 和 resizeMode

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Image from '../src/index';

const App = () => {
  return (
    <Image
      source={{
        uri:
          'https://gw.alicdn.com/tfs/TB1g6AvPVXXXXa7XpXXXXXXXXXX-215-215.png',
      }}
      fallbackSource={{
        uri:
          'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg',
      }}
      style={{
        width: '100rpx',
        height: '100rpx',
      }}
      resizeMode="cover"
    />
  );
};

render(<App />, document.body, { driver: DriverUniversal });