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 |

H5 下是 Web 原生的Event事件

| 成员 | 类型 | 描述 | | --- | --- | --- | | target | Dom | 图片自身元素 | | target.naturalWidth | number | 图片宽度 | | target.naturalHeight | number | 图片高度 |