Picture
结合图片尺寸优化、webp、懒加载等能力，以提升页面性能体验。
安装
$ npm install tb-shop-picture --save引用
"usingComponents": {
"picture": "tb-shop-picture"
}示例
import { createElement, render } from 'rax';
import Picture from '@ali/rax-picture';
const App = () => {
return (
<Picture
source={{
uri: 'https://gw.alicdn.com/imgextra/i2/O1CN01NSVEkX1Qu4ejdWYp9_!!6000000002035-2-tps-1071-351.png',
}}
style={{
width: '750rpx'
}}
/>
);
}优化后的实际加载图片的 URL 为：http://gw.alicdn.com/imgextra/i2/O1CN01NSVEkX1Qu4ejdWYp9_!!6000000002035-2-tps-1071-351.png_790x10000.jpg_.webp 图片大小从 155kB 降低到 68kB
注意：必须显式的指定图片宽度。
属性
注：
1、支持列表中的 
| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 |
|---|---|---|---|---|---|
| source | Object: {uri: String} |
- | true | 设置图片的 uri | ALL |
| style | Object: { width: String height: String } |
- | true | width 为必填属性，否则图片无法正常展示，可以补充其他属性 | ALL |
| className | String |
- | false | 类名 | ALL |
| fallbackSource | Object: {uri: String} |
- | false | 备用图片的uri（当主图加载失败是加载） |
|
| resizeMode | String： 'contain' 'cover' 'stretch' |
- | false | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小 | ALL |
| quality | String: 'original' 'normal' 'low' 'high' 'auto' |
- | false | 图片质量 | |
| placeholder | String |
- | false | 懒加载时的占位 URL，在图片下载过程中将展示占位图，图片下载完成后将显示source中指定的图片。 |
|
| lazyload | Boolean |
false | false | web端有效，根据图像是否在可视范围内延迟加载图像，Web 端需同时引入 appear-polyfill |
|
| autoPixelRatio | Boolean |
true | false | web端有效，在高分辨率下使用二倍图 | |
| autoRemoveScheme | Boolean |
false | true | web端有效,图像 URL 自动删除协议头 |
|
| autoReplaceDomain | Boolean |
true | false | web端有效 图像 URL 域名替换成 gw.alicdn.com |
|
| autoScaling | Boolean |
true | false | web端有效, 为图像 URL 添加缩放后缀，将会根据 style 内的 width 属性添加缩放后缀 |
|
| autoWebp | Boolean |
true | false | web端有效，添加 webp 后缀 |
|
| autoCompress | Boolean |
true | false | web端有效, 是否自动添加质量压缩后缀，png图片不支持压缩 |
|
| highQuality | Boolean |
true | false | web端有效， 使用高质量的压缩后缀，autoCompress为true有效，png图片不支持压缩 |
|
| compressSuffix | String |
- | false | web端有效，autoCompress为false有效，图像质量压缩后缀规则，png图片不支持压缩 |
|
| qualityAbs | Number |
- | false | web端有效, autoCompress为false有效，图像质量压缩绝对值，png图片不支持压缩，取值0< Q <100,且必须为5的倍数 |
|
| qualityRlt | Number |
- | false | web端有效, autoCompress为false有效，图像质量压缩相对原图比例值，png图片不支持压缩，取值0< q <100,且必须为5的倍数 |
|
| sharpen | Number |
- | false | web端有效, autoCompress为false有效，图像锐化参数，可选值：50，100，150，200，250，300，png图片不支持压缩 |
|
| ignoreGif | Boolean |
true | false | web端有效，所有针对 URL 的优化是否忽略 gif 格式的图像，默认忽略 |
|
| onLoad | Function |
- | false | 图片加载成功的回调函数 |
|
| onError | Function |
- | false | 图片加载失败的回调函数 |
|
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 |
图片高度 |