https://github.com/virgoone/react-cool-image
一个动画友好、加载友好的图片组件
https://github.com/virgoone/react-cool-image
animation image img intersection-observer lazy-loading react
Last synced: 4 months ago
JSON representation
一个动画友好、加载友好的图片组件
- Host: GitHub
- URL: https://github.com/virgoone/react-cool-image
- Owner: virgoone
- License: mit
- Created: 2021-09-30T07:03:14.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-28T00:50:33.000Z (over 1 year ago)
- Last Synced: 2024-04-28T02:37:14.209Z (over 1 year ago)
- Topics: animation, image, img, intersection-observer, lazy-loading, react
- Language: TypeScript
- Homepage: https://react-cool-image.netlify.app
- Size: 3.45 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React 图片组件
动画友好的图片组件，支持懒加载、默认图片显示、错误回退等，使用 `七牛` 和 `阿里云` 存储做图片格式优化，默认加载 `webp` 格式，使用 [`react-cool-inview`](https://github.com/wellyshen/react-cool-inview) 做懒加载方案，具体参考 [`Intersection Observer`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
[](https://www.npmjs.com/package/react-cool-image)
[](https://www.npmtrends.com/react-cool-image)
[](https://bundlephobia.com/result?p=react-cool-image)
## Requirement
It requires `react v16.8+`.
## Installation
This package is distributed via [npm](https://www.npmjs.com/package/react-cool-image).
```sh
$ yarn add react-cool-image
# or
$ npm install --save react-cool-image
```
## Quick Start
```js
import Image from 'react-cool-image'
import 'react-cool-image/dist/style.scss'
// or
// import 'react-cool-image/dist/style.css'
const App = () =>
```
## 通过 CDN 使用
除了可以通过 `npm` 安装之外，你也可以直接使用 `CDN` 资源，`react-cool-image` 页提供了 umd 格式的代码产物。
```html
```
注：`css` 在 `0.4.0` 版本提供，`0.4.0` 以下使用 `inline style`
```html
```
## API
支持 **lazy-load**，**progressive image loading**（带虚化效果），如果浏览器支持 **webp**，会自动使用 **webp** 格式的图片。
| Prop | Type | Default | Description |
| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `src` | string | | 图片地址 It's `required`.
[Support formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) |
| `error` | string | | 错误时显示图片的地址
[Support formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) |
| `placeholder` | string | | Placeholder image source.
[Support formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) |
| `webp` | boolean | true | 是否使用 webp |
| `format` | boolean \| [Format](#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](#observerOptions) section. |
| `...` | | | Find more [props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) and [events](https://reactjs.org/docs/events.html#image-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
默认值
```json
{
"rootMargin": "20px",
"unobserveOnEnter": true
}
```
其他参数参考：[`react-cool-inview API`](https://github.com/wellyshen/react-cool-inview#api)