react-cool-image v0.5.3

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/react-cool-image@0.4.0/dist/style.css"
/>

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

<script src="https://cdn.jsdelivr.net/npm/react-cool-image@0.4.0/dist/index.umd.js"></script>

API

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

Attention

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

Format

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

observerOptions

默认值

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

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