Question

描述

• 复杂的图片组件

• 在 Weex 容器中，Picture 和 Image 组件只有 forceUpdate 属性不同

安装

$ npm install rax-picture --save

属性

属性	类型	默认值	必填	描述	支持
source	Object: {uri: String}	-	✔️	设置图片的 uri
style	Object: { width: Number height: Number }	-	✔️	图片样式 width和height为必填属性，否则图片无法正常展示，可以补充其他属性
fallbackSource	Object: {uri: String}	-	✘	备用图片的uri（当主图加载失败是加载）
forceUpdate	Boolean	false	✘	Picture 是一个 PureComponent ，它的 shouldComponentUpdate 决定了当且仅当 porps.source.uri 有变化时才会重新 render。如果你想忽略它的 shouldComponentUpdate，则传入 forceUpdate={true}
resizeMode	String： 'contain' 'cover' 'stretch'	stretch	✘	当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小
mode	String	scaleToFill	✘	小程序中的图片模式，可选项更多
quality	String: 'original' 'normal' 'low' 'high' 'auto'	-	✘	图片质量
placeholder	String	-	✘	占位图的 URL，在图片下载过程中将展示占位图，图片下载完成后将显示source中指定的图片。
lazyload	Boolean	true	✘	web端有效，根据图像是否在可视范围内延迟加载图像，Web 端需引入 //g.alicdn.com/kg/appear/0.2.0/appear.min.js 脚本 (注意：fixed 的元素请关闭 lazyload)
autoPixelRatio	Boolean	true	✘	web端有效，在高分辨率下使用二倍图
autoRemoveScheme	Boolean	true	✘	web端有效,图像 URL 自动删除协议头
autoReplaceDomain	Boolean	true	✘	web端有效 图像 URL 域名替换成 gw.alicdn.com
autoScaling	Boolean	true	✘	web端有效, 为图像 URL 添加缩放后缀，将会根据 style 内的 width 属性添加缩放后缀
autoWebp	Boolean	true	✘	web端有效，添加 webp 后缀
autoCompress	Boolean	true	✘	web端有效, 添加质量压缩后缀
compressSuffix	Array<string>	['q75', 'q50']	✘	web端有效, 图像质量压缩后缀规则
highQuality	Boolean	true	✘	web端有效， 使用高质量的压缩后缀
ignoreGif	Boolean	true	✘	web端有效，所有针对 URL 的优化是否忽略 gif 格式的图像，默认忽略

注：基础属性、事件及图片含义见组件概述。

resizeMode

• contain：缩放图片以完全装入<Image>区域，可能背景区部分空白。

• cover：缩放图片以完全覆盖<Image>区域，可能图片部分看不见。

• stretch：默认值. 按照<Image>区域的宽高比例缩放图片。

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

H5 下是 Web 原生的Event事件

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

示例

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Picture from 'rax-picture';

const App = () => {
  return (
    <Picture
      source={{
        uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
      }}
      style={{
        width: 68,
        height: 68
      }}
    />
  );
}
render(<App />, document.body, { driver: DriverUniversal });