React 图片组件
动画友好的图片组件,支持懒加载、默认图片显示、错误回退等,使用 七牛
和 阿里云
存储做图片格式优化,默认加载 webp
格式,使用 react-cool-inview
做懒加载方案,具体参考 Intersection Observer
Requirement
It requiresreact 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 格式的图片。| 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