react imgix
v9.10.0
react-imgix 、ImgixをReactサイトに統合し、サーバー側の画像を生成するためのカスタムコンポーネントを提供します。
React-Imgixを始める前に、 srcsetとsizesに関するEric Portisの独創的な記事を読むことを強くお勧めします。この記事では、レスポンシブデザインのレスポンシブ画像の履歴、必要な理由、およびこれらすべてのテクノロジーがどのように連携して帯域幅を節約し、ユーザーにより良いエクスペリエンスを提供するかについて説明します。 React-Imgixの主な目標は、これらのツールを開発者が実装しやすくすることです。そのため、それらがどのように機能するかを理解することで、React-Imgixエクスペリエンスが大幅に向上することです。
以下は、応答性のある画像を説明するのに役立つ他の記事と、IMGIXと一緒にどのように機能するかを説明します。
<picture>でimgixを使用します。アートの方向性と解像度の切り替えの違いについて説明し、Imgixでアートの方向を達成する方法の例を提供します。srcsetとIMGIXを使用したレスポンシブ画像。 IMGIXがsrcsetとsizesでどのように動作し、適切な画像を提供できるかを調べます。 npm install react-imgixyarn add react-imgixこのモジュールは、2つの導入バージョンをエクスポートします。 ES6モジュールを認識しているバンドラーがこのモジュールを消費するために使用されている場合、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とサイズ」の記事は、 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は必要な数の微分解像度を生成できるため、React-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>介して設定する必要があります。
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値を尊重し、Booleanプロパティを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の要素を測定する必要があるため、最初にマウントし、次に画像を背景画像として再レンダリングします。したがって、この手法はサーバーのレンダリングではあまりうまく機能しません。これをサーバーのレンダリングでうまく動作させたい場合は、幅と高さを手動で設定する必要があります。
幅と高さを設定します：
事前にこれらを既に知っている場合は、幅および/または高さを明示的に設定することをお勧めします。これにより、コンポーネントが2つのレンダリングパスを実行する必要がなくなり、背景画像がすぐにレンダリングされます。
これは、 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アプリケーションのNested <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 >この動作を利用して、 <Imgix>コンポーネントを使用して部分的なURLを使用できます。プロバイダーの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コンポーネントのコンテキストを変更し、Root 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で機能を達成できるでしょう。
このライブラリは、ベースURLといくつかのパラメーターを与えられた完全なIMGIX URLを生成するために、純粋な関数buildURLを公開します。
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にはクエリパラメーターも含まれている場合があります。これらは、2番目のパラメーターで渡されるパラメーターによってオーバーライドされます。
この機能は、独自のカスタムimg要素を作成するため、またはReact-Bootstrapの画像コンポーネントなどの他の画像コンポーネントで使用するために使用できます。
ixlibパラメーターは、 buildURL(<url>, <params>, { disableLibraryParam: true })によって無効になる場合があります。
このライブラリを使用すると、開発者は、 htmlAttributesを使用して、好きな属性を基礎となるdom要素に渡すことができます。
たとえば、開発者がimgコンポーネントにカスタムonLoadコールバックを添付したい場合：
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> 怠loadロード画像を希望する場合は、 htmlAttributesで渡されたloadingプロパティを使用して、ブラウザレベルのレイジーロードを使用することをお勧めします。
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/>このプロパティには強力なブラウザのサポートがあり、追加のJavaScriptなしで機能します。さらに、ブラウザレベルのレイジーロードを使用すると、 sizes="auto"でサイズ属性を最適化することができます。これにより、ブラウザはレイアウトに基づいて画像の最適なサイズを自動的に計算できます。
負荷距離などの怠zyなロード動作を粒状制御する必要がある場合は、交差点オブザーバーAPIを使用できます。
Lazysizeのようなライブラリを使用している場合、IMGIXコンポーネントに、構成設定を変更することにより、標準のsrc 、 srcset 、およびsizes代わりに互換性のある属性を生成するように指示できます。
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> <Source />コンポーネントでも同じ構成が使用できます
NB：データ - *属性の変更をキャプチャするために、属性変更プラグインを使用することをお勧めします。これがなければ、このライブラリに小道具を変更しても、レンダリングされた画像に影響はありません。
以前のようにLQIP画像を使用したい場合は、Lazysizeを使用することをお勧めします。 lazysizeを使用してReact-Imgixを使用するために、構成設定を変更し、HTMLATTRIBUTESにフォールバック画像SRCを配置することにより、標準のsrc 、 srcset 、およびsizesの代わりにLAZYSIZES互換属性を生成するように指示できます。
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB：最初の負荷の後に画像の小道具が変更された場合、低品質の画像は高品質の画像を置き換えます。この場合、 src属性をDOMを直接変更して設定する必要がある場合があります。または、小道具が変更された後、Lazysize APIを手動で呼び出す必要がある場合があります。いずれにせよ、この動作は図書館メンテナーによってサポートされていないため、お客様の責任で使用してください。
<Imgix ref={handleRef}>を使用してReact-imgixに渡されたref 、dom要素ではなく<Imgix>インスタンスにrefを添付します。 htmlAttributesを使用してレンダリングされるDOM要素にrefを添付することが可能です。
< Imgix htmlAttributes = { { ref : handleRef } } >これは、ソースと画像の要素にも機能します。
これらの小道具は、Imgixおよびソースコンポーネント間で共有されています
通常： https://[your_domain].imgix.net/[image] 。パラメーターを含めないでください。
コンポーネントのsrcプロップとして部分パスを使用する場合にのみ必要です。 IE、 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とサイズ」の記事は、 sizes属性の使用方法について深くなります。
className 、トップレベルのコンポーネントに適用されます。画像自体にclassNameを設定するには、 htmlAttributes参照してください。
画像を特定の高さに強制します。
画像を特定の幅に強制します。
可変幅SRCセットの生成を無効にして、応答性を有効にします。
デフォルトでは、このコンポーネントは生成されたURLにパラメーターを追加して、このライブラリの分析とサポートを使用してImgixを支援します。これは、この小道具をtrueに設定することで無効にすることができます。
デフォルトでは、このコンポーネントはSRCおよびSRCSETのURLパスをエンコードします。これは、この小道具をtrueに設定することで無効にすることができます。 IMGIXパスエンコーディングの仕組みの詳細については、IMGIX/JS-Coreドキュメントを参照してください。
HTMLノードに追加する他の属性（例： alt 、 data-* 、 className ）。
引数としてマウントされたDOMノードを使用して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-coreを参照してください。
className 、トップレベルのコンポーネントに適用されます。画像自体にclassNameを設定するには、 htmlAttributes参照してください。
引数としてマウントされたDOMノードを使用して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 ）。
このライブラリは、特定の状況下でいくつかの警告をトリガーして、開発者がアップグレードまたはフェイルフーストを支援することを試みます。エラーの状況を検出するのが難しいため、これらは間違っている場合があります。これは迷惑なので、それらをオフにする方法があります。これは初心者には推奨されませんが、カスタムコンポーネントやその他の高度な機能を使用している場合は、それらをオフにする必要がある可能性があります。
警告は、トップレベルでエクスポートされるPublic Config APIであるPublicConfigAPIでオフにすることができます。
// in init script/application startup
import { PublicConfigAPI } from "react-imgix" ;
PublicConfigAPI . disableWarning ( '<warningName>' ) ;
//... rest of app startup
React . render ( ... ) ; PublicConfigAPI.enableWarning('<warningName>')で警告を有効にすることもできます
利用可能な警告は次のとおりです。
warningName | 説明 |
|---|---|
| FallbackImage | <Picture>を使用すると、子供の終わりに<img>または<Imgix>がない場合にトリガーされます。ブラウザが提供されたソースと一致できないときに、画像が正しくレンダリングされるようにするには、フォールバック画像が重要です |
| SizesAttribute | このライブラリでは、画像が応答的にレンダリングできるように、 sizes小道具を渡す必要があります。これは非常に特別な状況でのみオフにするはずです。 |
| Invalidarformat | ar Imgixパラメーターが正しい形式で渡されないときにスローされる警告（ w:h ） |
| 特大のイメージ | 画像がレンダリングされたサイズよりも大幅に大きい本質的なサイズでロードされると、ランタイムエラーがトリガーされました。 |
| lazylcp | 画像がLCP要素であると検出されたが、 loading="lazy"でロードされたときにトリガーされるランタイムエラーがトリガーされます。 |
このリリースにより、Imgixのレンダリングサービスのリリースとは、React-Imgix APIをよりインラインで提供します。
ユーザーが気付く最大の変更は、このプロジェクトのコンポーネントがデフォルトのfit=cropパラメーターを生成しなくなることです。この背後にある当初の意図は、生成された画像が、少なくとも1つの寸法が指定された場合、アスペクト比を維持することでした。ただし、デフォルトのIMGIX API動作はfit=clipを設定します。これは、このプロジェクトに反映されています。これはすべてのユーザーに変化を引き起こすことはないかもしれませんが、場合によっては異常なレンダリングされた画像動作をもたらす可能性があります。そのため、注意を払って誤りを犯し、ユーザーに主要なリリースを介してこれらの変更を選択できるようにしたいと思います。
現在、画像をレンダリングするときにfit=cropのデフォルトの生成に依存している場合、コンポーネントを呼び出すときに手動で指定する必要があります。
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
imgixParams = { { fit : "crop" } }
/>他の主要な変更は、コンポーネントが画像のアスペクト比をどのように決定するかに関連しています。指定された寸法に基づいて計算された高さh=値を追加する代わりに、URL文字列はIMGIXアスペクト比パラメーターar=を使用して構築されます。幸いなことに、アスペクト比を指定するためのインターフェイスは以前と変わりません。ただし、ユーザーはfit=cropパラメーターを渡す必要があります。
< Imgix
src = "http://assets.imgix.net/examples/pione.jpg"
width = { 400 }
imgixParams = { { ar : "2:1" , fit : "crop" } }
/>これは、このライブラリの非常に大きなアップデートであり、多くの壊れた変更があります。これが引き起こす可能性のある問題についてお詫び申し上げます。壊れた変化の数を減らすことを試みました。また、これらすべての変更を1つのリリースにバッチアップして、その影響を軽減するために取り組みました。この後しばらくの間、変更を行うことを計画しておらず、機能の追加に焦点を当てます。
このメジャーバージョンバンプの最大の変更は、応答性のための幅ベースのsrcSetとsizesへの移動です。これには、より良いサーバーのレンダリング、より良い応答性、バグの可能性が低い、パフォーマンスの改善など、多くの利点があります。これは、古いフィッティングからコンテナーサイズの動作が削除されたことを意味します。これが必要な場合、これを達成する方法の例はここで見つけることができます
バージョン8にアップグレードするには、次の変更を行う必要があります。
sizes小道具は、 <Imgix>のすべての使用法に追加する必要があります。 sizesが新しい場合（またはそうでない場合でも）、 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'のすべての使用法を削除します。これはサポートされていません。この機能を一貫して実装するのは難しすぎると判断されました。この機能をまだ使用したい場合は、この問題を親指にしてください。
aggressiveLoad 、 component 、 fluid 、精度が使用されなくなったときのprecisionを削除します。
defaultHeightとdefaultWidthのすべての使用法をwidthとheight小道具に変更します。
generateSrcSet名前を変更して、 disableSrcSet 、プロップの値として渡された値を反転します。 IE generateSrcSet={false} disableSrcSet={true} disableSrcSetなります
SRCSETの新しい使用法（IE 11など）をサポートしていないブラウザをサポートが必要な場合は、Great PictureFillなどのポリフィルを追加することをお勧めします。
srcset 、 sizes 、またはpictureをサポートしていないブラウザは、必要に応じてデフォルトのimg srcに優雅に戻ります。これらのブラウザに完全な反応エクスペリエンスを提供したい場合は、React-ImgixはPictureFillとともにうまく機能します！このブラウザのサポートは、Browserstackからの優れたサポートによって可能になります。
これらの素晴らしい人々に感謝します（絵文字キー）：
フレデリック・フォガティ ？ | シャーウィンスキー ？ | ジェイソン・エバレ ？ | ポール・ストロー ？ | ケリー・サットン ？ | リチャード・ブリス | エリック・コスロー |
バルドゥール・ヘルガソン | ジョナサン・シャッツ | テオ | タナースターラ ？ | ニコラス・ススキ | ボイスアップ | クレイグ・コチス |
デニス・シャフ | アンディ・ケント | ギャビー・ロッシュ | スティーブンクック ？ | ユージン・ナゴニー | サミュエル・ジャイルズ | Espen Hovlandsdal |
ダニエル・ファレル | Luiz Fernando Da Silva Cieslak | ニック・ゴットリーブ | ピエールグリモー | ルイス・H・ボール・ジュニア |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎しますが、開始する前に貢献ガイドラインを確認してください！
React-ImgixはもともとFrederick Fogertyによって作成されました。 ISCライセンスの下でライセンスされています（詳細については、ライセンスファイルを参照してください）。
