react imgix
v9.10.0
react-imgix提供了自定义组件，用于将IMGIX集成到React站点并生成图像服务器端。
在开始使用React-Imgix之前，强烈建议您阅读Eric Portis的srcset和sizes开创性文章。本文解释了响应式设计中响应式图像的历史，为什么它们需要的原因以及所有这些技术如何共同努力来节省带宽并为用户提供更好的体验。 React-Imgix的主要目标是使这些工具更容易为开发人员实施，因此了解他们的工作方式将显着改善您的React-Imgix体验。
以下是其他一些文章，有助于解释响应图像，以及它如何与Imgix一起工作：
<picture>一起使用。讨论了艺术方向和分辨率切换之间的差异，并提供了如何用Imgix完成艺术方向的示例。srcset和IMGIX的响应图像。查看Imgix如何与srcset合作，并sizes为正确的图像。 npm install react-imgixyarn add react-imgix该模块导出了两个转录版本。如果使用ES6模块感知的bundler来消耗此模块，它将拾取ES6模块版本并可以摇摇欲坠。如果您不使用ES6模块，则无需做任何事情
import Imgix from "react-imgix" ;
// in react component
< Imgix src = { string } /> ;对于您将使用<img>的简单使用，React-Imgix可以使用如下：
import Imgix from "react-imgix" ;
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" sizes = "100vw" /> ;请注意： 100vw是全出血图像的合适sizes值。如果您的图像不是全出来的，则应为sizes使用不同的值。埃里克·波蒂斯（Eric Portis）的“ srcset and Suble”文章对如何使用sizes属性进行了深入。
这将生成与以下几个类似的HTML：
< img
src =" https://assets.imgix.net/examples/pione.jpg?auto=format&crop=faces&ixlib=react-7.2.0 "
sizes =" 100vw "
srcset ="
https://assets.imgix.net/examples/pione.jpg?auto=format&crop=faces&ixlib=react-7.2.0&w=100 100w,
https://assets.imgix.net/examples/pione.jpg?auto=format&crop=faces&ixlib=react-7.2.0&w=200 200w,
...
"
/>由于iMgix可以根据需要生成尽可能多的导数分辨率，因此使用您指定的尺寸来编程地计算它们。所有这些信息都已放入SRCSET和大小属性中。
已知宽度和高度已知和固定：如果事先已知宽度和高度，并且需要固定尺寸的图像，则建议明确设置它们：
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
width = { 100 } // This sets what resolution the component should load from the CDN and the size of the resulting image
height = { 200 }
/> ;指定宽度和高度时， <Imgix>将为图像提供一个带有分辨率描述符的SRCSET。
宽度和高度已知但流体：如果已知图像的固有宽度和高度，但仍应设置宽度和高度以避免布局变化，但是必须通过htmlAttributes设置它们，以免提示<Imgix>以在SRCSET中产生分辨率描述者。
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "(min-width: 1024px) 40vw, 90vw"
htmlAttributes = { { // These are ignored by Imgix but passed through to the <img> element
width : 200 ,
height : 100 ,
} }
/> ;在此示例中， <Imgix>将产生带有宽度描述符的SRCSET。
请注意，此库不在服务器组件中运行，而是将“使用客户端”指令添加到组件中。这意味着它们可以与服务器组件一起使用（例如，作为孩子），但仍需要客户端的JavaScript。客户组件仍然是SSRED。
React-Imgix在服务器上也很好地工作。由于React-Imgix使用srcset和sizes ，因此允许浏览器加载后立即渲染正确尺寸的图像。如果已知，请通过htmlAttributes传递宽度和高度属性，以帮助对抗布局变化。
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
htmlAttributes = { {
width : 400 ,
height : 250 ,
} }
/> ;如果事先已知宽度和高度，并且需要固定尺寸的图像，请设置宽度和高度，并且不设置sizes ：
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
width = { 100 } // This sets what resolution the component should load from the CDN and the size of the resulting image
height = { 200 }
/> ; 默认情况下，该组件动态起作用。该组件将利用srcset并sizes为其容器呈现正确的尺寸图像。这是这种响应行为的一个例子。
应将sizes设置好，以使其正常工作，并应使用一些样式来设置组件渲染的大小。如果没有sizes和正确的样式，则图像可能会以全尺寸呈现。
./styles.css
. App {
display : flex;
}
. App > img {
margin : 10 px auto;
width : 10 vw ;
height : 200 px ;
} ./app.js
import "./styles.css" ;
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
/>
</ div > ;纵横比：开发人员可以通过所需的纵横比，在生成SRCSET时使用该比例来调整和裁剪图像，按指定。为了使ar参数生效，请确保将fit参数设置为crop 。
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
imgixParams = { { ar : "16:9" } }
/>
</ div >长宽比以格式width:height指定。尺寸可以是整数或浮点。以下所有内容都是有效的：16：9，5：1，1.92：1，1：1.67。
如果不需要上述流体，动态性质，则可以明确设置宽度和高度。
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
width = { 100 } // This sets what resolution the component should load from the CDN and the size of the resulting image
height = { 200 }
/> ;固定图像渲染将在生成SRCSET时自动附加到每个dpr参数映射到的变量q参数。该技术通常用于补偿高-DPR图像的增加文件。由于高-DPR图像以较高的像素密度显示在设备上，因此可以降低图像质量以减少整体文件大小，而无需牺牲感知的视觉质量。有关此技术中此技术的更多信息和示例，请参见此博客文章。这种行为将尊重通过imgixParams传递的任何q值，并且可以通过布尔属性disableQualityByDPR完全禁用。
< Imgix
src = "https://domain.imgix.net/image.jpg"
width = { 100 }
disableQualityByDPR
/>将生成以下SRCSET：
https://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,
https://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,
https://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,
https://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,
https://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x图像可以通过使用<Background />来渲染为儿童背后的背景。该组件将测量页面上CSS确定的容器的自然尺寸，并为这些维度提供最佳图像。
例子：
// In CSS
. blog - title {
width : 100 vw ;
height : calc ( 100 vw - 100 px ) ;
}
// In Component (React)
import { Background } from 'react-imgix'
< Background src = "https://.../image.png" className = "blog-title" >
< h2 > Blog Title </ h2 >
</ Background >该组件共享许多在主组件中使用的道具，例如imgixParams和htmlAttributes 。
由于该组件必须测量DOM中的元素，因此它将首先安装，然后以图像作为背景图像重新渲染。因此，该技术与服务器渲染不太友好。如果您希望与服务器渲染效果很好地配合使用，则必须手动设置宽度和高度。
设置宽度和高度：
如果您已经事先知道这些，建议明确设置宽度和/或高度。这将使组件不必进行两次渲染通行证，并且会立即渲染背景图像。
这是通过将w和h作为imgixParams的道具来完成的。
< Background
src = "https://.../image.png"
imgixParams = { { w : 1920 , h : 500 } }
className = "blog-title"
>
< h2 > Blog Title </ h2 >
</ Background > 使用图片元素，您可以创建响应式图像：
import Imgix , { Picture , Source } from "react-imgix" ;
< Picture >
< Source
src = { src }
width = { 400 }
htmlAttributes = { { media : "(min-width: 768px)" } }
/>
< Source
src = { src }
width = { 200 }
htmlAttributes = { { media : "(min-width: 320px)" } }
/>
< Imgix src = { src } imgixParams = { { w : 100 } } />
</ Picture >为了减少道具中的重复，JSX支持对象扩展道具：
import Imgix , { Picture , Source } from "react-imgix" ;
const commonProps = {
src : "https://..." ,
imgixParams : {
fit : "crop" ,
crop : "faces" ,
} ,
} ;
< Picture >
< Source
{ ... commonProps }
width = { 400 }
htmlAttributes = { { media : "(min-width: 768px)" } }
/>
< Source
{ ... commonProps }
width = { 200 }
htmlAttributes = { { media : "(min-width: 320px)" } }
/>
< Imgix src = { src } width = { 100 } />
</ Picture >当不传递后备图像时，会显示警告。在特殊情况下，该警告可能会被禁用。要禁用此警告，请在警告部分中查看。
<ImgixProvider>高阶组件（HOC）使其道具可用于您的React应用程序中的任何嵌套<Imgix>组件。
例如，通过定义的imgixParams在应用程序的最高级别上渲染<ImgixProvider> ，您的所有<Imgix>组件都可以访问相同的imgixParams 。
import React from "react" ;
import Imgix , { ImgixProvider } from "react-imgix" ;
import HomePage from "./components/HomePage" ;
function App ( ) {
return (
< div className = "App" >
< header className = "App-header" >
< ImgixProvider imgixParams = { { ar : "16:9" , fit : "crop" } } >
< div className = "intro-blurb" > { /* ... */ } </ div >
< div className = "gallery" >
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" />
< Imgix src = "https://sdk-test.imgix.net/ساندویچ.jpg" />
</ div >
</ ImgixProvider >
</ header >
</ div >
) ;
}
export default App ;因此生成的HTML看起来像
< div class =" gallery " >
< img
src =" https://assets.imgix.net/examples/pione.jpg?auto=format&ar=16%3A9&fit=crop "
...
/>
< img
src =" https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg?auto=format&ar=16%3A9&fit=crop "
...
/>
</ div >您可以利用此行为将部分URL与<Imgix>组件一起使用。通过在提供商上定义domain支柱，可以使其可用于所有嵌套<Imgix>组件。
// inside App.jsx
{
/*... */
}
< ImgixProvider domain = "assets.imgix.net" >
< div className = "intro-blurb" > { /* ... */ } s </ div >
< div className = "gallery" >
< Imgix src = "/examples/pione.jpg" />
< Imgix src = "Office Background 1.png" />
</ div >
</ ImgixProvider > ;
{
/*... */
}上面的两个<Imgix>组件都将从提供商访问domain支柱，并使其相对src路径解散到同一域。因此，生成的HTML看起来像：
< div class =" gallery " >
< img src =" https://assets.imgix.net/examples/pione.jpg " ... />
< img
src =" https://assets.imgix.net/Office%20Background%201.png?auto=format "
...
/>
</ div > <ImgixProvider>使可访问的道具也可以被<Imgix>组件覆盖。 <Imgix>组件上定义的任何支撑物将覆盖提供商设置的值。
// inside App.jsx
{
/*... */
}
< ImgixProvider imgixParams = { { ar : "16:9" , fit : "crop" } } >
< div className = "intro-blurb" > { /* ... */ } s </ div >
< div className = "gallery" >
< Imgix
imgixParams = { { ar : "4:2" } }
src = "https://assets.imgix.net/examples/pione.jpg"
/>
< Imgix src = "https://sdk-test.imgix.net/ساندویچ.jpg" />
</ div >
</ ImgixProvider > ;
{
/*... */
}使生成的HTML看起来像这样
< div class =" gallery " >
< img
src =" https://assets.imgix.net/examples/pione.jpg?auto=format&ar=4%3A2&fit=crop "
...
/>
< img
src =" https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg?ar=16%3A9&fit=crop "
...
/>
</ div >要从<Imgix>组件中删除共享道具，可以将相同的支柱设置为在组件本身上undefined 。
// inside App.jsx
{
/*... */
}
< ImgixProvider height = { 500 } >
< div className = "intro-blurb" > { /* ... */ } s </ div >
< div className = "gallery" >
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" />
< Imgix height = { undefined } src = "https://sdk-test.imgix.net/ساندویچ.jpg" />
</ div >
</ ImgixProvider > ;
{
/*... */
}因此生成的HTML看起来像这样：
< div class =" gallery " >
< img src =" https://assets.imgix.net/examples/pione.jpg?h=500 " ... />
< img
src =" https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg "
...
/>
</ div >您可以嵌套ImgixProvider组件，以确保不同的消费者具有不同的道具。
例如，要将Imgix组件与Picture组件不同，您可以将ImgixProvider嵌套在另一个组件中。
嵌套的提供商将更改Picture组件的上下文，从本质上删除了他们对根ImgixProvider提供的共享道具的访问。
import React from 'react'
import Imgix , { ImgixProvider , Picture , Source } from "react-imgix" ;
export default function simpleImage ( ) {
return (
< div className = "imgix-simple-api-example" >
{ /* there props will be accessible to all the imgix components */ }
< ImgixProvider
domain = "assets.imgix.net"
src = "/examples/pione.jpg"
imgixParams = { { fit : "crop" } }
>
< Imgix width = { 200 } height = { 500 } src = "/examples/pione.jpg" />
< Imgix domain = "sdk-test.imgix.net" src = "/ساندویچ.jpg" />
< ImgixProvider
{ /* since we define a new provider here, the context is redefined for any child components */ }
>
< Picture >
{ /* imgixParams prop is no longer defined here */ }
< Source
width = { 100 }
htmlAttributes = { { media : "(min-width: 768px)" } }
/>
< Source
width = { 200 }
htmlAttributes = { { media : "(min-width: 800px)" } }
/>
< Imgix src = "/examples/pione.jpg" />
</ Picture >
</ ImgixProvider >
</ ImgixProvider >
</ div >
)
}尽管Imgix开放了提出建议，但如果它是非常特定的用例，我们可能不接受该功能。以下功能是我们认为一般高级用例的示例。我们的目标是支持普通img ， picture和source元素的所有用法的95％。
如果您想要的功能不在这一百分比之外，请不要担心！您可能仍然能够使用React-Imgix更强大的API： buildURL来实现您的功能。
该库公开了一个纯函数， buildURL ，用于生成给定基本URL和某些参数的完整iMgix URL。
import { buildURL } from "react-imgix" ;
buildURL ( "http://yourdomain.imgix.net/image.png" , { w : 450 , h : 100 } ) ; // => http://yourdomain.imgix.net/image.png?auto=format&w=450&h=100&ixlib=react-x.x.x基本URL还可能包含查询参数。这些参数将被第二个参数传递给这些参数。
此功能可用于创建您自己的自定义img元素，或与其他图像组件一起使用，例如React-Bootstrap的Image组件。
ixlib参数可以通过： buildURL(<url>, <params>, { disableLibraryParam: true })禁用
该库允许开发人员将他们喜欢的任何属性传递给具有htmlAttributes的基础DOM元素。
例如，如果开发人员想将自定义的onLoad回调附加到img组件：
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> 如果您想懒惰的加载图像，我们建议使用浏览器级懒惰加载，并在loading属性中通过htmlAttributes传递：
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/>该属性具有强大的浏览器支持，并且没有其他JavaScript的功能。此外，使用浏览器级懒惰加载可以优化具有sizes="auto" ，该属性允许浏览器根据其布局自动计算图像的最佳大小。
如果您需要对延误加载行为（例如加载距离）进行颗粒状控制，则可以使用交叉点观察者API。
如果您使用的是LazySizes之类的库，则可以告诉IMGIX组件通过更改一些配置设置来生成兼容属性，而不是标准的src ， srcset和sizes ：
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/>相同的配置可用于<Source />组件
NB：建议使用属性更改插件以捕获数据 - *属性中的更改。没有这个，将道具更改为本库将不会影响渲染的图像。
如果您想使用LQIP图像，例如以前，我们建议使用Lazysizes。为了将React-Imgix与Lazysizes sizes使用，您可以简单地告诉它通过更改某些配置src并将后备图像SRC放置srcset HTMLATTRIBUTES：
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB：如果在第一次负载后更改了图像的道具，则质量低的图像将取代高质量的图像。在这种情况下，可能必须通过直接修改DOM来设置src属性，或者在更改道具后可能必须手动调用Lazysize API。无论如何，图书馆维护者不支持此行为，因此请自行使用。
使用<Imgix ref={handleRef}>将ref将ref连接到<Imgix>实例而不是dom元素的参考将ref传递给react-imgix。可以将REF附加到使用htmlAttributes渲染的DOM元素上：
< Imgix htmlAttributes = { { ref : handleRef } } >这也适用于来源和图片元素。
这些道具在IMGIX和源组件中共享
通常以形式： https://[your_domain].imgix.net/[image] 。不要包括任何参数。
仅在将部分路径用作组件的src Prop时才需要。即，如果src是"/images/myImage.jpg" ，则需要定义domain支柱。
例如：
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > imgix参数添加到图像src中。
例如：
< Imgix imgixParams = { { mask : "ellipse" } } /> 在页面上渲染时，指定了开发人员的预期图像元素。类似于宽度。例如100vw ， calc(50vw - 50px) ， 500px 。强烈建议不通过width或height 。埃里克·波蒂斯（Eric Portis）的“ srcset and Suble”文章对如何使用sizes属性进行了深入。
应用于顶级组件的className 。要在图像本身上设置className ，请参阅htmlAttributes 。
迫使图像是一定的高度。
强制图像是一定宽度。
禁用可变宽度SRC集以实现响应能力。
默认情况下，此组件将一个参数添加到生成的URL中，以帮助IMGIX获得该库的分析和支持。可以通过将此道具设置为true来禁用。
默认情况下，此组件编码SRC和SRCSET中的URL路径。可以通过将此道具设置为true来禁用。有关IMGIX路径编码的工作方式的更多信息，请参阅IMGIX/JS核心文档。
要添加到HTML节点的任何其他属性（示例： alt ， data-* ， className ）。
将componentDidMount称为“参数”。
允许将src，srcset和大小属性重新映射到不同的HTML属性。例如：
attributeConfig = { {
src : 'data-src' ,
srcSet : 'data-srcset' ,
sizes : 'data-sizes'
} }此将SRC重新映射到data-src ，SRCSET到data-srcset ，等等。
呈现固定尺寸的图像时，禁用可变q参数的生成。
允许自定义SRCSET生成的行为。有效的选项是widths ， widthTolerance ， minWidth ， maxWidth和devicePixelRatios 。有关这些选项的文档，请参见 @imgix/js核。
应用于顶级组件的className 。要在图像本身上设置className ，请参阅htmlAttributes 。
将componentDidMount称为“参数”。
要添加到HTML节点的任何其他属性（示例： alt ， data-* ， className ）。
通常以形式： https://[your_domain].imgix.net/[image] 。不要包括任何参数。
imgix参数添加到图像src中。这也是可以明确设置宽度和高度的方式。有关此信息的更多信息，请参见上面的“背景”部分。
例如：
< Background imgixParams = { { mask : "ellipse" } } /> 应用于顶级组件的className 。要在图像本身上设置className ，请参阅htmlAttributes 。
默认情况下，此组件将一个参数添加到生成的URL中，以帮助IMGIX获得该库的分析和支持。可以通过将此道具设置为true来禁用。
要添加到HTML节点的任何其他属性（示例： alt ， data-* ， className ）。
该图书馆在某些情况下触发了一些警告，以尝试援助开发人员升级或失败。由于难以检测误差情况，因此有时可能是不正确的。这很烦人，因此有一种方法可以关闭它们。不建议初学者使用此功能，但是如果您使用的是自定义组件或其他高级功能，则可能必须将其关闭。
可以使用公共配置API PublicConfigAPI关闭警告，该公共conconfigapi在顶级上导出。
// in init script/application startup
import { PublicConfigAPI } from "react-imgix" ;
PublicConfigAPI . disableWarning ( '<warningName>' ) ;
//... rest of app startup
React . render ( ... ) ;也可以使用PublicConfigAPI.enableWarning('<warningName>')
可用的警告是：
warningName | 描述 |
|---|---|
| 后卫 | 使用<Picture>时，在孩子末尾没有<img>或<Imgix>时触发。后备图像对于确保浏览器无法与所提供的来源匹配时正确呈现图像至关重要 |
| 尺寸 | 该库需要通过sizes道具，以便图像可以响应地呈现。这只能在非常特殊的情况下关闭。 |
| 无效 | 当未以正确格式传递ar IMGIX参数时，请发出警告（ w:h ） |
| 超大型图像 | 当图像加载具有固有大小的大小大小时，触发了运行时错误。 |
| lazylcp | 当检测到图像为LCP元素时，触发了运行时错误，但加载了loading="lazy" 。 |
此版本将React-Imgix API与Imgix的渲染服务更加列入。
用户将注意到的最大更改是，该项目的组件将不再生成默认的fit=crop参数。此背后的最初意图是，当指定至少一个维度时，生成的图像将保持长宽比。但是，默认的imgix API行为设置fit=clip ，该剪辑现在反映在此项目中。尽管这可能不会导致所有用户的破坏变化，但在某些情况下可能会导致异常渲染的图像行为。因此，我们宁愿在谨慎的一边犯错，并为用户提供通过主要版本选择这些更改的能力。
如果您当前依赖默认生成fit=crop时呈现图像，则现在必须在调用组件时手动指定它：
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
imgixParams = { { fit : "crop" } }
/>另一个主要变化与组件如何确定图像的长宽比有关。现在，将使用IMGIX纵横比参数ar=构建URL字符串，而不是基于指定的维度附加计算的高度h=值。幸运的是，指定长宽比的界面与以前没有什么不同。但是，用户将必须传递fit=crop参数才能生效：
< Imgix
src = "http://assets.imgix.net/examples/pione.jpg"
width = { 400 }
imgixParams = { { ar : "2:1" , fit : "crop" } }
/>这是对该库的大型更新，并进行了许多破坏的更改。对于可能造成的任何问题，我们深表歉意，我们试图减少破坏变化的数量。我们还努力将所有这些更改分解为一个发行版，以减少其影响。此后，我们不打算在此之后进行一段时间的破坏更改，并将重点放在添加功能上。
这个主要版本颠簸的最大变化是转向基于宽度的srcSet和响应能力的sizes 。这有很多好处，包括更好的服务器渲染，更好的响应能力，更少的错误潜力以及改进性能。这确实意味着已经删除了旧的拟合范围大小的行为。如果有必要，可以在此处找到如何实现这一目标的例子
要升级到第8版，应进行以下更改。
sizes道具应添加到<Imgix>的所有用法中。如果您的sizes是新的（即使不是），则强烈建议使用Eric关于srcset和sizes开创性文章。
将type='picture'的所有用法更改为<Picture>和type='source'到<Source>
// this...
< Imgix type = 'picture' >
< Imgix type = 'source' src = { src } >
< Imgix type = 'source' src = { src } >
</ Imgix >
// becomes...
< Picture >
< Source src = { src } >
< Source src = { src } >
</ Picture >有关更多信息，请参见图片支持。
删除所有type='bg'的用法，因为它不再支持。决定始终如一地实施此功能太难了。如果您仍然想使用此功能，请对此问题进行大拇指：＃160如果我们收到了足够的请求，我们将重新实现它。
删除道具的aggressiveLoad ， component ， fluid ， precision ，因为它们不再使用。
将defaultHeight和defaultWidth的所有用法更改为width和height道具。
重命名generateSrcSet disableSrcSet并将传递的值倒入道具的值。 ie generateSrcSet={false}变为disableSrcSet={true}或简单地disableSrcSet
如果需要支持不支持SRCSET新用法的浏览器（例如IE 11），我们建议添加一个多填充物，例如Great the Great Picturefill。
srcset ， sizes或picture的浏览器会在适当的情况下优雅地回到默认的img src 。如果您想为这些浏览器提供完全响应的体验，React-imgix可以与Picture-Fill一起使用！Browserstack的大力支持使这种浏览器支持成为可能。
谢谢这些好人（表情符号钥匙）：
弗雷德里克·福格蒂（Frederick Fogerty） ？ | Sherwinski ？ | 杰森·埃伯勒（Jason Eberle） ？ | 保罗·斯特劳 ？ | 凯利·萨顿 ？ | 理查德·布利斯（Richard Bliss） | 埃里克·科斯洛（Eric Koslow） |
鲍德尔·赫尔加森（Baldur Helgason） | 乔纳森·沙茨（Jonathan Schatz） | 西奥 | 坦纳搅拌 ？ | 尼古拉斯·苏西（Nicholas Suski） | 借口 | 克雷格·科奇斯（Craig Kochis） |
丹尼斯·沙夫（Dennis Schaaf） | 安迪·肯特 | Gabby Losch | 斯蒂芬·库克 ？ | 尤金·纳戈尼（Eugene Nagorny） | 塞缪尔·吉尔斯（Samuel Giles） | Espen Hovlandsdal |
丹尼尔·法雷尔（Daniel Farrell） | 路易斯·费尔南多·达·席尔瓦·西尔克 | 尼克·戈特利布（Nick Gottlieb） | 皮埃尔·格里玛（Pierre Grimaud） | 路易斯·鲍尔（Luis H. Ball Jr.） |
该项目遵循全企业规范。欢迎任何形式的贡献，但请在开始之前查看贡献指南！
React-Imgix最初是由Frederick Fogerty创建的。它是根据ISC许可证获得许可的（有关更多信息，请参见许可证文件）。
