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 });

Current Tags

2.4.1-0 ... beta (3 years ago)
2.4.3 ... latest (2 years ago)

121 Versions

2.4.3 ... 2 years ago
2.4.2 ... 2 years ago
2.4.1 ... 3 years ago
2.4.1-0 ... 3 years ago
2.4.0 ... 3 years ago
2.3.3-beta.0 ... 3 years ago
2.3.2 ... 3 years ago
2.3.1 ... 3 years ago
2.3.0 ... 3 years ago
2.3.0-0 ... 3 years ago
2.2.6 ... 4 years ago
2.2.5 ... 4 years ago
2.2.5-0 ... 4 years ago
2.2.4 ... 4 years ago
2.2.3 ... 4 years ago
2.2.3-2 ... 4 years ago
2.2.3-1 ... 4 years ago
2.2.2 ... 4 years ago
2.2.2-1 ... 4 years ago
2.2.2-0 ... 4 years ago
2.2.1 ... 4 years ago
2.2.1-beta.0 ... 4 years ago
2.2.0 ... 5 years ago
2.1.1 ... 5 years ago
2.1.1-0 ... 5 years ago
2.1.0 ... 5 years ago
2.0.4 ... 5 years ago
2.0.3 ... 5 years ago
2.0.2 ... 5 years ago
2.0.1 ... 5 years ago
1.1.3 ... 5 years ago
1.1.3-beta.3 ... 5 years ago
1.1.3-beta.2 ... 5 years ago
1.1.3-beta.1 ... 5 years ago
1.1.3-0 ... 5 years ago
1.1.2 ... 5 years ago
1.1.2-1 ... 5 years ago
1.1.2-0 ... 5 years ago
1.1.1 ... 5 years ago
1.1.0 ... 5 years ago
1.1.0-beta.1 ... 5 years ago
1.0.4-beta.4 ... 5 years ago
1.0.4-beta.3 ... 5 years ago
1.0.4-beta.1 ... 5 years ago
1.0.3 ... 5 years ago
1.0.1-beta.4 ... 5 years ago
1.0.2 ... 5 years ago
1.0.1 ... 5 years ago
1.0.1-beta.3 ... 5 years ago
1.0.1-beta.2 ... 5 years ago
1.0.1-beta.1 ... 5 years ago
1.0.0-miniapp.beta.8 ... 5 years ago
1.0.0-miniapp.beta.7 ... 5 years ago
1.0.0-miniapp.beta.6 ... 5 years ago
1.0.0-miniapp.beta.5 ... 5 years ago
1.0.1-beta.0 ... 5 years ago
1.0.0-miniapp.beta.4 ... 5 years ago
1.0.0-miniapp.beta.3 ... 5 years ago
1.0.0-miniapp.beta.2 ... 5 years ago
1.0.0-miniapp.beta.1 ... 5 years ago
1.0.0-miniapp.beta.0 ... 5 years ago
1.0.0 ... 6 years ago
1.0.0-beta.1 ... 6 years ago
1.0.0-beta.0 ... 6 years ago
0.6.8 ... 6 years ago
0.6.6-1 ... 6 years ago
0.6.7 ... 6 years ago
0.6.6 ... 6 years ago
0.6.5 ... 6 years ago
0.6.4 ... 6 years ago
0.6.3 ... 7 years ago
0.6.2 ... 7 years ago
0.6.1 ... 7 years ago
0.6.0 ... 7 years ago
0.5.4 ... 7 years ago
0.5.2 ... 7 years ago
0.5.1 ... 7 years ago
0.5.0 ... 7 years ago
0.4.20 ... 7 years ago
0.4.19 ... 7 years ago
0.4.18 ... 7 years ago
0.4.17 ... 7 years ago
0.4.16 ... 7 years ago
0.4.15 ... 7 years ago
0.5.0-beta ... 7 years ago
0.4.14 ... 7 years ago
0.4.13 ... 7 years ago
0.4.12 ... 7 years ago
0.4.11 ... 7 years ago
0.4.10 ... 7 years ago
0.4.9 ... 7 years ago
0.4.8 ... 7 years ago
0.4.7 ... 7 years ago
0.4.6 ... 7 years ago
0.4.5 ... 7 years ago
0.4.4 ... 7 years ago
0.4.3 ... 7 years ago
0.4.2 ... 7 years ago
0.4.1 ... 7 years ago
0.4.0 ... 7 years ago
0.3.8 ... 7 years ago
0.3.7 ... 7 years ago
0.3.6 ... 7 years ago
0.3.5 ... 7 years ago
0.3.4 ... 7 years ago
0.3.3 ... 8 years ago
0.3.2 ... 8 years ago
0.3.1 ... 8 years ago
0.3.0 ... 8 years ago
0.2.11 ... 8 years ago
0.2.10 ... 8 years ago
0.2.9 ... 8 years ago
0.2.8 ... 8 years ago
0.2.7 ... 8 years ago
0.2.6 ... 8 years ago
0.2.5 ... 8 years ago
0.2.4 ... 8 years ago
0.2.3 ... 8 years ago
0.2.2 ... 8 years ago
0.2.1 ... 8 years ago
0.2.0 ... 8 years ago