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
source={{
uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
}}
style={{
width: 68,
height: 68
}}
/>
);
}