# @endiliey/react-ideal-image 中文文档
规范地址：https://npmcn.com/package/%40endiliey/react-ideal-image/
版本：0\.0\.11
npm 元数据更新时间：2022-04-05T07:38:43.054Z
中文译文更新时间：2026-11-13T16:54:07.409Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40endiliey/react-ideal-image
原文对照：https://npmcn.com/package/%40endiliey/react-ideal-image/?lang=original
项目主页：https://github.com/endiliey/react-ideal-image#readme
源码仓库：https://github.com/endiliey/react-ideal-image
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：67.3 kB，23 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>= 8\.9\.0
- 运行依赖：0 个
- peer 依赖：prop-types \>=15，react \>=0\.14\.x，react-waypoint \>=9\.0\.2
- 首次发布：2019-11-13T15:27:02.113Z
- 最新版本发布：2019-11-24T15:43:24.092Z
- 近 30 天下载量：22837（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）
## 中文简介
适应图像组件
## 安装
```sh
npm install @endiliey/react-ideal-image
```
也可以使用：`pnpm add @endiliey/react-ideal-image`、`yarn add @endiliey/react-ideal-image`、`bun add @endiliey/react-ideal-image`
## README
# 反应-理想图像
适应图像组件
* * *
[](https://travis-ci.org/stereobooster/react-ideal-image) [](https://codecov.io/github/stereobooster/react-ideal-image) [](https://www.npmjs.com/package/react-ideal-image) [](http://www.npmtrends.com/react-ideal-image) [](https://github.com/stereobooster/react-ideal-image/blob/master/LICENSE)
[](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-contributors) [](http://makeapullrequest.com/) [](https://github.com/stereobooster/react-ideal-image/blob/master/other/CODE_OF_CONDUCT.md)
[](https://github.com/stereobooster/react-ideal-image/watchers) [](https://github.com/stereobooster/react-ideal-image/stargazers) [](https://twitter.com/intent/tweet?text=Check%20out%20react-ideal-image%20by%20%40stereobooster%20https%3A%2F%2Fgithub.com%2Fstereobooster%2Freact-ideal-image%20%F0%9F%91%8D)
## 问题
我需要反应组件来同步加载图像,它会基于网络来适应,这样用户就可以控制,哪个图像可以加载.
## 这个解决方案
读取 [导言](https://npmcn.com/package/%40endiliey/react-ideal-image/introduction.md)。 。 。 .
## 目录
- [安装](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-installation)
- [使用量](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-usage)
- [道具](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-props)
- [获取Icon](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-geticon)
- [获取信息](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-getmessage)
- [获取Url](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-geturl)
- [高度](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-height)
- [图标](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-icons)
- [装填器](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-loader)
- [占位符](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-placeholder)
- [自动下载](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-shouldautodownload)
- [字符串](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-srcset)
- [主题](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-theme)
- [阈值](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-threshold)
- [宽度](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-width)
- [其他解决方案](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-other-solutions)
- [贡献者](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-contributors)
- [自由主义](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-license)
## 安装
此模块通过 [无](https://www.npmjs.com/) 与 [节点](https://nodejs.org/) 财务报告和审定财务报表 应安装为您的项目之一 `dependencies`数字 :
```
npm install react-ideal-image --save
```
> 此软件包还取决于 `react`, (中文(简体) ), `prop-types`,以及 `react-waypoint`。 。 。 . 请确保你也有这些安装.
## 使用量
基于创建- react- app (宏需要 v2) 的项目示例
```js
import React from 'react'
import lqip from 'lqip.macro'
import IdealImage from 'react-ideal-image'
import image from './images/doggo.jpg'
const lqip = lqip('./images/doggo.jpg')
const App = () => (
)
```
## 道具
这是需要传递到组件的道具列表.
### 获取Icon
> `function(state: object)` qq 可选, 默认图标基于状态对象提供
此函数根据组件的当前状态决定要显示的图标 .
### 获取信息
> `function(icon: string, state: object)` qq 可选的,默认的信息是基于图标和状态对象提供的.
此函数根据图标( 从 getIcon proc返回) 和组件当前状态决定要显示的信息 .
### 获取Url
> `function({})` qq 可选, 无有用的默认值
此功能在组件进入视图端口后立即调用, 并用于根据宽度和格式生成 URLs, 如果 `props.srcSet` 不提供src场.
### 高度
> `number` 所需时间
Px中图像的高度.
### 图标
> `object` 所需时间
这提供了图标的地图. 默认情况下,组件使用来自材料设计的图标,作为带有SVG元素的回放组件被执行. 您可以自定义图标
```js
const icons = {
load: DownloadIcon,
//...
}
```
### 装填器
> `string` qq 可选, 默认为 “ xhr ”
这个道具需要两个选项之一, `xhr` 财务报告和审定财务报表 `image`。 更多信息 [这里](https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#cancel-download)。 。 。 .
### 占位符
> `object` 所需时间
这需要两个对象中的一个
```js
// To add a solid color placeholder
{
color: ''
}
```
或者说
```js
/**
* To add a low quality image
* [Low Quality Image Placeholder](https://github.com/zouhir/lqip)
* [SVG-Based Image Placeholder](https://github.com/technopagan/sqip)
* base64 encoded image of low quality
*/
{
lqip: ''
}
```
更多关于它的内容 [这里](https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#lqip)。 。 。 .
### 自动下载
> `function({})` 提供了基于设备网络决定的可选的默认函数.
此函数决定是否自动下载图像 。 默认函数返回 `false` (单位:千美元) `2g` 网络, (单位:千美元) `3g` 它根据 `props.threshold` 用于 `4g` 它返回的网络 `true` 默认.
### 字符串
> `array[srcType: object]` 所需时间
这提供了图像不同格式和大小的一系列来源. 更多关于它的内容 [这里](https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#srcset)。 。 。 . 这个 `srcType` 结构以下
```js
srcType = {
width: number, // required
src: string,
size: number,
format: string, // one of the 'jpeg' or 'webp'
}
```
### 主题
> `object` 所需时间
这为该部分提供了一个主题。 默认情况下,组件使用内置样式,但也有可能使用CSS模块并覆盖所有样式.
```js
const theme = {
placeholder: {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
position: 'relative',
},
// ...
}
```
### 阈值
> `number` 备选
说明要等待多少以毫秒计,直到认为下载慢.
### 宽度
> `number` 所需时间
Px中图像的宽度.
## 其他解决方案
- [反应-渐进图像](https://github.com/FormidableLabs/react-progressive-image)
- [反应-负载](https://github.com/jasonslyvia/react-lazyload)
- [反应-懒惰图像](https://github.com/sergiodxa/react-lazy-image)
- [反应图像](https://github.com/mbrevda/react-image)
- [反应-懒散负载](https://github.com/loktar00/react-lazy-load)
- [反应- 跟踪- 图像](https://github.com/linasmnew/react-graceful-image)
- [反应 - 工人- 图像](https://github.com/nitish24p/react-worker-image)
- [懒鬼形象](https://github.com/notwaldorf/lazy-image)
- [反应- 简单图像](https://github.com/bitjourney/react-simple-image)
- [反应- 力量- 相片](https://github.com/tvthatsme/react-power-picture)
- [反应-震动](https://github.com/gokcan/react-shimmer)
- [按图像](https://www.gatsbyjs.org/packages/gatsby-image/)
- [反应-同步要素 `![]()
`](https://github.com/palmerhq/react-async-elements#img)
## 贡献者
感谢这些人[emoji 密钥](https://github.com/kentcdodds/all-contributors#emoji-key):
| [
**立体振动器**](https://github.com/stereobooster)
[💻](https://github.com/stereobooster/react-ideal-image/commits?author=stereobooster "Code") [📖](https://github.com/stereobooster/react-ideal-image/commits?author=stereobooster "Documentation") [🚇](https://npmcn.com/package/%40endiliey/react-ideal-image/#readme-infra-stereobooster "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/stereobooster/react-ideal-image/commits?author=stereobooster "Tests") | [
**伊万·巴贝克**](https://github.com/sompylasar)
[📖](https://github.com/stereobooster/react-ideal-image/commits?author=sompylasar "Documentation") | [
**阿伦·库马尔**](https://github.com/palerdot)
[📖](https://github.com/stereobooster/react-ideal-image/commits?author=palerdot "Documentation") | [
**安德鲁·利索夫斯基**](http://hipstersmoothie.com/)
[💻](https://github.com/stereobooster/react-ideal-image/commits?author=hipstersmoothie "Code") | [
**蒂莫西·弗农**](https://github.com/tvthatsme)
[⚠️](https://github.com/stereobooster/react-ideal-image/commits?author=tvthatsme "Tests") | [
**维哈尔申德**](http://vs1682.github.io/)
[📖](https://github.com/stereobooster/react-ideal-image/commits?author=vs1682 "Documentation") | [
**埃夫格尼·库马乔夫**](https://github.com/EvgeniyKumachev)
[📖](https://github.com/stereobooster/react-ideal-image/commits?author=EvgeniyKumachev "Documentation") |
| :-: | :-: | :-: | :-: | :-: | :-: | :-: |
| [
**约翰·穆恩**](https://github.com/Tawe)
[💻](https://github.com/stereobooster/react-ideal-image/commits?author=Tawe "Code") | | | | | | |
本项目遵循 [全部贡献者](https://github.com/kentcdodds/all-contributors) 规格. 任何捐款都欢迎!
## 自由主义
代码 - MIT
图标 - [Apache 许可证 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE)
## 常见问题
### @endiliey/react-ideal-image 是什么？
适应图像组件
### 如何安装 @endiliey/react-ideal-image？
在项目目录运行 npm install @endiliey/react-ideal-image，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prop-types（\>=15）、react（\>=0\.14\.x）、react-waypoint（\>=9\.0\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @endiliey/react-ideal-image 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @endiliey/react-ideal-image 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @endiliey/react-ideal-image 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>= 8\.9\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @endiliey/react-ideal-image 可以商用吗？
@endiliey/react-ideal-image 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @endiliey/react-ideal-image 的下载量有多少？
根据 npm 官方下载统计，@endiliey/react-ideal-image 在 2026/10/14 – 2026/11/12 这 30 天内被下载 22,837 次，日均约 761 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @endiliey/react-ideal-image 还在维护吗？
最新版本 0\.0\.11 发布于 2019/11/24（6 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/11/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。