Tb-shop-picture NPM

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、支持列表中的代表h5 代表weex 代表小程序代表快应用

属性	类型	默认值	必填	描述	支持
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