rax-picture

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