React 图片组件

动画友好的图片组件，支持懒加载、默认图片显示、错误回退等，使用 七牛 和 阿里云 存储做图片格式优化，默认加载 webp 格式，使用 react-cool-inview 做懒加载方案，具体参考 Intersection Observer

Requirement

It requires react v16.8+.

Installation

This package is distributed via npm.

$ yarn add react-cool-image
# or
$ npm install --save react-cool-image

Quick Start

import Image from 'react-cool-image'
import 'react-cool-image/dist/style.scss'
// or
// import 'react-cool-image/dist/style.css'

const App = () => <Image width={300} height={100} src="https://xxx.png" />

通过 CDN 使用

除了可以通过 npm 安装之外，你也可以直接使用 CDN 资源，react-cool-image 页提供了 umd 格式的代码产物。

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css"
/>

注：css 在 0.4.0 版本提供，0.4.0 以下使用 inline style

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>

API

支持 lazy-load，progressive image loading（带虚化效果），如果浏览器支持 webp，会自动使用 webp 格式的图片。

| Prop | Type | Default | Description | | --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | src | string | | 图片地址 It's required. Support formats | | error | string | | 错误时显示图片的地址 Support formats | | placeholder | string | | Placeholder image source. Support formats | | webp | boolean | true | 是否使用 webp | | format | boolean | Format | true | 是否使用 云存储 格式化，为 true 时默认取全局 CDN 配置 | | width | number | | 宽度 单位 px | | height | number | | 高度，单位 px | | lazy | boolean | string | true | Turn on/off lazy loading. 目前可选值 boolean ｜thumb ｜skeleton | | observerOptions | object | {} | See the ObserverOptions section. | | ... | | | Find more props and events. |

Attention

• 当 lazy 为 thumb 地址时才会有缩略图虚化效果
• format 为 true 时，或者 src 包含图片格式化参数时，format 默认不起作用
• width，height 并不是图片最终的宽高。只是该组件用来计算 placeholder 宽高的基数。 计算公式为 宽 = 父元素的宽，高 = 宽 * (height / width)
• 如果 lazy 不为空，width 与 height 是建议设置的

Format

云存储图片格式化参数，可覆盖默认全局 CDN 配置参数，默认阿里云图片格式配置

| 名称 | 类型 | 说明 | 默认值 | | ----------- | ------ | --------------------------------------------------------------------------------- | --------------------------------------------- | | thumb | string | 缩略图格式化参数，示例：x-oss-process=image/resize,p_15 | x-oss-process=image/resize,p_15 | | thumbWebp | string | 缩略图 webp 格式参数，示例：x-oss-process=image/resize,p_15/format,webp | x-oss-process=image/resize,p_15/format,webp | | webp | string | 图片 webp 格式参数，示例：x-oss-process=image/format,webp | x-oss-process=image/format,webp |

observerOptions

默认值

{
  "rootMargin": "20px",
  "unobserveOnEnter": true
}

其他参数参考：react-cool-inview API