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許可證獲得許可的（有關更多信息，請參見許可證文件）。
