反应-理想图像
适应图像组件
问题
我需要反应组件来同步加载图像,它会基于网络来适应,这样用户就可以控制,哪个图像可以加载.
这个解决方案
读取 导言。 。 。 .
目录
安装
此模块通过 无 与 节点 财务报告和审定财务报表
应安装为您的项目之一 dependencies数字 :
npm install react-ideal-image --save
此软件包还取决于
react, (中文(简体) ),prop-types,以及react-waypoint。 。 。 . 请确保你也有这些安装.
使用量
基于创建- react- app (宏需要 v2) 的项目示例
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 = () => (
<IdealImage
placeholder={{lqip}}
srcSet={[{src: image, width: 3500}]}
alt="doggo"
width={3500}
height={2095}
/>
)
道具
这是需要传递到组件的道具列表.
获取Icon
function(state: object)qq 可选, 默认图标基于状态对象提供
此函数根据组件的当前状态决定要显示的图标 .
获取信息
function(icon: string, state: object)qq 可选的,默认的信息是基于图标和状态对象提供的.
此函数根据图标( 从 getIcon proc返回) 和组件当前状态决定要显示的信息 .
获取Url
function({})qq 可选, 无有用的默认值
此功能在组件进入视图端口后立即调用, 并用于根据宽度和格式生成 URLs, 如果 props.srcSet 不提供src场.
高度
number所需时间
Px中图像的高度.
图标
object所需时间
这提供了图标的地图. 默认情况下,组件使用来自材料设计的图标,作为带有SVG元素的回放组件被执行. 您可以自定义图标
const icons = {
load: DownloadIcon,
//...
}
装填器
stringqq 可选, 默认为 “ xhr ”
这个道具需要两个选项之一, xhr 财务报告和审定财务报表 image。 更多信息 这里。 。 。 .
占位符
object所需时间
这需要两个对象中的一个
// To add a solid color placeholder
{
color: ''
}
或者说
/**
* 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: ''
}
更多关于它的内容 这里。 。 。 .
自动下载
function({})提供了基于设备网络决定的可选的默认函数.
此函数决定是否自动下载图像 。 默认函数返回 false (单位:千美元) 2g 网络,
(单位:千美元) 3g 它根据 props.threshold 用于 4g 它返回的网络 true 默认.
字符串
array[srcType: object]所需时间
这提供了图像不同格式和大小的一系列来源. 更多关于它的内容 这里。 。 。 .
这个 srcType 结构以下
srcType = {
width: number, // required
src: string,
size: number,
format: string, // one of the 'jpeg' or 'webp'
}
主题
object所需时间
这为该部分提供了一个主题。 默认情况下,组件使用内置样式,但也有可能使用CSS模块并覆盖所有样式.
const theme = {
placeholder: {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
position: 'relative',
},
// ...
}
阈值
number备选
说明要等待多少以毫秒计,直到认为下载慢.
宽度
number所需时间
Px中图像的宽度.
其他解决方案
- 反应-渐进图像
- 反应-负载
- 反应-懒惰图像
- 反应图像
- 反应-懒散负载
- 反应- 跟踪- 图像
- 反应 - 工人- 图像
- 懒鬼形象
- 反应- 简单图像
- 反应- 力量- 相片
- 反应-震动
- 按图像
- 反应-同步要素
<Img>
贡献者
感谢这些人emoji 密钥:
 立体振动器 💻 📖 🚇 ⚠️ |  伊万·巴贝克 📖 |  阿伦·库马尔 📖 |  安德鲁·利索夫斯基 💻 |  蒂莫西·弗农 ⚠️ |  维哈尔申德 📖 |  埃夫格尼·库马乔夫 📖 |
|---|---|---|---|---|---|---|
 约翰·穆恩 💻 |
本项目遵循 全部贡献者 规格. 任何捐款都欢迎!
自由主义
代码 - MIT
图标 - Apache 许可证 2.0