Picture
安装
$ npm install rax-picture --save引用
import Picture from 'rax-picture';属性
注：
1、支持列表中的 
代表h5 
代表weex 
代表小程序
代表快应用
| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 |
|---|---|---|---|---|---|
| source | Object: {uri: String} |
- | true | 设置图片的 uri | ALL |
| style | Object: { width: Number height: Number } |
- | true | 图片样式 width和height为必填属性，否则图片无法正常展示，可以补充其他属性 | 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 |
true | false | web端有效，根据图像是否在可视范围内延迟加载图像，Web 端需引入 //g.alicdn.com/kg/appear/0.2.2/appear.min.js 脚本 |
|
| autoPixelRatio | Boolean |
true | false | web端有效，在高分辨率下使用二倍图 | |
| autoRemoveScheme | Boolean |
true | false | 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端有效, 添加质量压缩后缀 | |
| compressSuffix | Array<string> |
['q75', 'q50'] | false | web端有效, 图像质量压缩后缀规则 | |
| highQuality | Boolean |
true | false | web端有效， 使用高质量的压缩后缀 | |
| 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 |
图片高度 |
示例
import createElement render from 'rax';import Picture from 'rax-picture'; const App = return <Picture = = /> ;