react imgix
v9.10.0
react-imgix fournit des composants personnalisés pour intégrer IMGIX dans les sites React et générer des images côté serveur.
Avant de commencer avec React-Imgix , il est fortement recommandé de lire l'article fondateur d'Eric Portis sur srcset et sizes . Cet article explique l'histoire des images réactives dans la conception réactive, pourquoi elles sont nécessaires et comment toutes ces technologies fonctionnent ensemble pour sauver la bande passante et offrir une meilleure expérience aux utilisateurs. L'objectif principal de React-IMGIX est de faciliter la mise en œuvre de ces outils pour les développeurs, donc avoir une compréhension de leur fonctionnement améliorera considérablement votre expérience React-Imgix.
Voici quelques autres articles qui aident à expliquer l'imagerie réactive et comment cela peut fonctionner aux côtés d'Imgix:
<picture> . Discute des différences entre la direction artistique et la commutation de résolution, et fournit des exemples de la façon d'accomplir la direction artistique avec IMGIX.srcset et IMGIX. Un aperçu de la façon dont IMGIX peut fonctionner avec srcset et sizes pour servir la bonne image. npm install react-imgixyarn add react-imgixCe module exporte deux versions transpirées. Si un bundler aéré à module ES6 est utilisé pour consommer ce module, il ramassera une version du module ES6 et peut effectuer des tremblements d'arbres. Si vous n'utilisez pas les modules ES6, vous n'avez rien à faire
import Imgix from "react-imgix" ;
// in react component
< Imgix src = { string } /> ; Pour simplement utiliser comme vous utiliseriez un <img> , React-IMGIX peut être utilisé comme suit:
import Imgix from "react-imgix" ;
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" sizes = "100vw" /> ; Veuillez noter: 100vw est une valeur sizes appropriée pour une image complète. Si votre image n'est pas complète, vous devez utiliser une valeur différente pour sizes . L'article "Srcset and Tailles" d'Eric Portis approfondit comment utiliser l'attribut sizes .
Cela générera du HTML similaire à ce qui suit:
< 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,
...
"
/>Étant donné que IMGIX peut générer autant de résolutions dérivées au besoin, React-IMGIX les calcule par programme, en utilisant les dimensions que vous spécifiez. Toutes ces informations ont été placées dans les attributs SRCSET et tailles.
Largeur et hauteur connues et fixes: si la largeur et la hauteur sont connues au préalable, et qu'une image de taille fixe est recherchée, il est recommandé qu'ils soient réglés explicitement:
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 }
/> ; Lorsque la largeur et la hauteur sont spécifiées, <Imgix> donnera à l'image un SRCSET avec des descripteurs de résolution.
Largeur et hauteur connues mais fluide: si la largeur et la hauteur intrinsèques de l'image sont connues, mais une image de taille de fluide est recherchée, la largeur et la hauteur doivent toujours être définies pour éviter le décalage de mise en page, mais elles doivent être définies via htmlAttributes afin de ne pas faire allusion à <Imgix> pour produire des descripteurs de résolution dans le 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 ,
} }
/> ; Dans cet exemple, <Imgix> produira un SRCSET avec des descripteurs de largeur.
Remarque Cette bibliothèque ne s'exécute pas dans les composants du serveur mais ajoute à la place la directive "Utiliser le client" dans les composants. Cela signifie qu'ils peuvent être utilisés aux côtés des composants du serveur (par exemple, en tant qu'enfants), mais ils nécessitent toujours JavaScript côté client. Les composants du client sont toujours SSRED.
React-IMGIX fonctionne également bien sur le serveur. Étant donné que React-IMGIX utilise srcset et sizes , il permet au navigateur de rendre l'image de taille correcte immédiatement après le chargement de la page. S'ils sont connus, passez les attributs de largeur et de hauteur via htmlAttributes pour aider à combattre le décalage de mise en page.
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
htmlAttributes = { {
width : 400 ,
height : 250 ,
} }
/> ; Si la largeur et la hauteur sont connues au préalable et qu'une image de taille fixe est recherchée, définissez la largeur et la hauteur et ne définissez pas 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 }
/> ; Ce composant agit dynamiquement par défaut. Le composant exploitera srcset et sizes pour rendre l'image de bonne taille pour son conteneur. Ceci est un exemple de ce comportement réactif.
sizes doivent être correctement définies pour que cela fonctionne bien, et un style doit être utilisé pour définir la taille du composant rendu. Sans sizes et style correct, l'image peut être rendue en pleine taille.
./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 > ; Ratio d'aspect: un développeur peut passer un rapport d'aspect souhaité, qui sera utilisé lors de la génération de SRCSET pour redimensionner et recadrer votre image comme spécifié. Pour que le paramètre ar prenne effet, assurez-vous que le paramètre fit est défini sur crop .
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
imgixParams = { { ar : "16:9" } }
/>
</ div > Le rapport d'aspect est spécifié dans la width:height . Soit la dimension peut être un entier ou un flotteur. Tous les éléments suivants sont valides: 16: 9, 5: 1, 1,92: 1, 1: 1,67.
Si la nature fluide et dynamique expliquée ci-dessus n'est pas souhaitée, la largeur et la hauteur peuvent être définies explicitement.
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 }
/> ; Le rendu d'image fixe ajoutera automatiquement un paramètre q variable mappant sur chaque paramètre dpr lors de la génération d'un SRCSET. Cette technique est couramment utilisée pour compenser l'augmentation de la taille des fichiers d'images élevées. Étant donné que les images élevées sont affichées à une densité de pixels plus élevée sur les appareils, la qualité d'image peut être abaissée pour réduire la taille globale des fichiers sans sacrifier la qualité visuelle perçue. Pour plus d'informations et des exemples de cette technique en action, consultez cet article de blog. Ce comportement respectera toute valeur q subordonnée réalisée via imgixParams et peut être complètement désactivée avec la propriété booléenne disableQualityByDPR .
< Imgix
src = "https://domain.imgix.net/image.jpg"
width = { 100 }
disableQualityByDPR
/>générera le srcset suivant:
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 Les images peuvent être rendues en arrière-plan derrière les enfants en utilisant <Background /> . Le composant mesurera la taille naturelle du conteneur tel que déterminé par le CSS sur la page, et rendra une image optimale pour ces dimensions.
Exemple:
// 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 > Ce composant partage de nombreux accessoires utilisés dans le composant principal, tels que imgixParams et htmlAttributes .
Comme le composant doit mesurer l'élément dans le DOM, il le montera d'abord, puis renvoie avec une image comme image d'arrière-plan. Ainsi, cette technique ne fonctionne pas très bien avec le rendu du serveur. Si vous souhaitez que cela fonctionne bien avec le rendu du serveur, vous devrez définir manuellement une largeur et une hauteur.
Définir la largeur et la hauteur:
La définition explicite de la largeur et / ou de la hauteur est recommandée si vous les connaissez déjà à l'avance. Cela permetra au composant de devoir faire deux passes de rendu, et cela rendra immédiatement une image d'arrière-plan.
Ceci est accompli en passant w et h comme accessoires aux imgixparams.
< Background
src = "https://.../image.png"
imgixParams = { { w : 1920 , h : 500 } }
className = "blog-title"
>
< h2 > Blog Title </ h2 >
</ Background > En utilisant l'élément d'image, vous pouvez créer des images réactives:
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 >Afin de réduire la duplication dans les accessoires, JSX prend en charge l'écart d'objet pour les accessoires:
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 >Un avertissement est affiché lorsqu'aucune image de secours n'est passée. Cet avertissement peut être désactivé dans des circonstances particulières. Pour désactiver cet avertissement, regardez dans la section des avertissements.
Le composant <ImgixProvider> Ordre supérieur (HOC) met ses accessoires à la disposition de tout composant <Imgix> imbriqué dans votre application React.
Par exemple, en rendant <ImgixProvider> au niveau supérieur de votre application avec imgixParams définis, tous vos composants <Imgix> auront accès aux mêmes 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 ;De sorte que le HTML généré ressemble à quelque chose
< 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 > Vous pouvez profiter de ce comportement pour utiliser des URL partiels avec le composant <Imgix> . En définissant l'hélice domain sur le fournisseur, il peut être rendu accessible à tous les composants <Imgix> imbriqués.
// 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 > ;
{
/*... */
} Les deux composants <Imgix> ci-dessus accéderont à l'hélice du domain du fournisseur et auront leurs chemins src relatifs à résoudre le même domaine. Pour que le HTML généré ressemble à quelque chose:
< 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 > Les accessoires que <ImgixProvider> rendent accessibles peuvent également être remplacés par des composants <Imgix> . Toute propulse définie sur le composant <Imgix> remplacera la valeur définie par le fournisseur.
// 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 > ;
{
/*... */
}De sorte que le HTML généré ressemble à quelque chose comme ça
< 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 > Pour supprimer un accessoire partagé d'un composant <Imgix> , le même accessoire peut être défini sur undefined sur le composant lui-même.
// 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 > ;
{
/*... */
}Pour que le HTML généré ressemble à ceci:
< 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 > Vous pouvez nist les composants ImgixProvider pour vous assurer que différents consommateurs ont des accessoires différents.
Par exemple, pour donner des composants Imgix différents accessoires des composants Picture , vous pouvez nicher un ImgixProvider à l'intérieur d'un autre.
Le fournisseur imbriqué modifiera le contexte du composant Picture , supprimant essentiellement leur accès aux accessoires partagés fournis par la racine 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 >
)
} Bien que IMGIX soit ouvert aux suggestions de fonctionnalités, nous pourrions ne pas accepter la fonctionnalité s'il s'agit d'un cas d'utilisation très spécifique. Les fonctionnalités ci-dessous sont des exemples de ce que nous considérons comme des cas d'utilisation avancés généraux. Notre cible ici est de prendre en charge 95% de tous les usages des éléments img , picture et source normaux.
Si votre fonctionnalité souhaitée tombe en dehors de ce pourcentage, ne vous inquiétez pas! Vous pourrez probablement encore réaliser votre fonctionnalité avec l'API plus puissante de React-Imgix: buildURL .
Cette bibliothèque expose une fonction pure, buildURL , pour générer des URL IMGIX complètes étant donné une URL de base et certains paramètres.
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.xL'URL de base peut également contenir des paramètres de requête. Ceux-ci seront remplacés par tous les paramètres transmis avec le deuxième paramètre.
Cette fonctionnalité peut être utilisée pour créer vos propres éléments img personnalisés, ou pour une utilisation avec d'autres composants d'image, tels que le composant d'image de React-Bootstrap.
Le paramètre ixlib peut être désactivé par: buildURL(<url>, <params>, { disableLibraryParam: true })
Cette bibliothèque permet au développeur de transmettre tout attribut qu'il aime à l'élément DOM sous-jacent avec htmlAttributes .
Par exemple, si le développeur souhaite joindre un rappel onLoad personnalisé à un composant img :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> Si vous souhaitez charger des images de chargement, nous vous recommandons d'utiliser un chargement paresseux au niveau du navigateur, avec la propriété loading , passé en htmlAttributes :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/> Cette propriété a une forte prise en charge du navigateur et fonctionne sans JavaScript supplémentaire. De plus, l'utilisation du chargement paresseux au niveau du navigateur permet d'optimisation de l'attribut tailles avec sizes="auto" , ce qui permet au navigateur de calculer automatiquement la taille optimale de l'image en fonction de sa mise en page.
Si vous avez besoin d'un contrôle granulaire sur le comportement de chargement paresseux tel que la distance de chargement, vous pouvez utiliser l'API de l'observateur d'intersection.
Si vous utilisez une bibliothèque comme les lazyizes, vous pouvez dire au composant IMGIX de générer des attributs compatibles au lieu du src standard, srcset et sizes en modifiant certains paramètres de configuration:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> La même configuration est disponible pour les composants <Source />
NB: Il est recommandé d'utiliser le plugin d'attribut pour modifier les modifications des attributs de données. Sans cela, changer les accessoires en cette bibliothèque n'aura aucun effet sur l'image rendue.
Si vous souhaitez utiliser des images LQIP, comme avant, nous vous recommandons d'utiliser les lazyizes. Afin d'utiliser React-IMGIX avec les lazyizes, vous pouvez simplement lui dire de générer des attributs compatibles de lazysizes au lieu du src standard, srcset et sizes en modifiant certains paramètres de configuration, et en plaçant l'image de repli Src dans les HTMlattributes:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB: Si les accessoires de l'image sont modifiés après la première charge, l'image de faible qualité remplacera l'image de haute qualité. Dans ce cas, l'attribut src peut devoir être défini en modifiant directement le DOM, ou l'API Lazyizes peut devoir être appelée manuellement après la modification des accessoires. Dans tous les cas, ce comportement n'est pas pris en charge par les agents de bibliothèque, alors utilisez à vos propres risques.
Un ref transmis pour react-iMgix en utilisant <Imgix ref={handleRef}> attachera le reflecte à l'instance <Imgix> , plutôt que l'élément DOM. Il est possible de fixer un reflète à l'élément DOM qui est rendu à l'aide htmlAttributes :
< Imgix htmlAttributes = { { ref : handleRef } } >Cela fonctionne également pour les éléments de source et d'image.
Ces accessoires sont partagés entre IMGIX et composants source
Habituellement sous la forme: https://[your_domain].imgix.net/[image] . N'incluez aucun paramètre.
Requis uniquement lors de l'utilisation de chemins partiels comme accessoire src pour un composant. C'est-à-dire, si src est "/images/myImage.jpg" , alors l'hélice domain doit être définie.
Par exemple :
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > IMGIX Params à ajouter à l'image src .
Par exemple :
< Imgix imgixParams = { { mask : "ellipse" } } /> A spécifié la taille attendue du développeur de l'élément d'image lorsqu'il est rendu sur la page. Similaire à la largeur. Par exemple 100vw , calc(50vw - 50px) , 500px . Hautement recommandé lorsqu'il ne passe pas width ou height . L'article "Srcset and Tailles" d'Eric Portis approfondit comment utiliser l'attribut sizes .
className appliqué au composant de niveau supérieur. Pour définir className sur l'image elle-même, voir htmlAttributes .
Forcer les images pour être une certaine hauteur.
Forcer les images comme une certaine largeur.
Désactiver la génération de largeur variable SRC ensemble pour permettre la réactivité.
Par défaut, ce composant ajoute un paramètre à l'URL générée pour aider IMGIX avec l'analyse et la prise en charge de cette bibliothèque. Cela peut être désactivé en définissant cet accessoire sur true .
Par défaut, ce composant code le chemin URL dans le SRC et le SRCSET. Cela peut être désactivé en définissant cet accessoire sur true . Pour plus d'informations sur le fonctionnement du codage d'IMGIX Path, veuillez vous référer aux documents IMGIX / JS-Core.
Tous les autres attributs à ajouter au nœud HTML (exemple: alt , data-* , className ).
Appelé componentDidMount avec le nœud Dom monté comme argument.
Permet de refaire les attributs SRC, SRCSet et Tailles à différents attributs HTML. Par exemple:
attributeConfig = { {
src : 'data-src' ,
srcSet : 'data-srcset' ,
sizes : 'data-sizes'
} } Cela re-mAPS SRC à data-src , SRCSET à data-srcset , etc.
Désactivez la génération de paramètres q variables lors de la rendu d'une image de taille fixe.
Permet de personnaliser le comportement de la génération SRCSET. Les options valides sont widths , widthTolerance , minWidth , maxWidth et devicePixelRatios . Voir @ imgix / js-core pour la documentation de ces options.
className appliqué au composant de niveau supérieur. Pour définir className sur l'image elle-même, voir htmlAttributes .
Appelé componentDidMount avec le nœud Dom monté comme argument.
Tous les autres attributs à ajouter au nœud HTML (exemple: alt , data-* , className ).
Habituellement sous la forme: https://[your_domain].imgix.net/[image] . N'incluez aucun paramètre.
IMGIX Params à ajouter à l'image src . C'est également ainsi que la largeur et la hauteur peuvent être explicitement définies. Pour plus d'informations à ce sujet, consultez la section "Background" ci-dessus.
Par exemple :
< Background imgixParams = { { mask : "ellipse" } } /> className appliqué au composant de niveau supérieur. Pour définir className sur l'image elle-même, voir htmlAttributes .
Par défaut, ce composant ajoute un paramètre à l'URL générée pour aider IMGIX avec l'analyse et la prise en charge de cette bibliothèque. Cela peut être désactivé en définissant cet accessoire sur true .
Tous les autres attributs à ajouter au nœud HTML (exemple: alt , data-* , className ).
Cette bibliothèque déclenche certains avertissements dans certaines situations pour essayer d'aider les développeurs à la mise à niveau ou à l'échec. Ceux-ci peuvent parfois être incorrects en raison de la difficulté de détecter les situations d'erreur. C'est ennuyeux, et il y a donc un moyen de les désactiver. Cela n'est pas recommandé pour les débutants, mais si vous utilisez des composants personnalisés ou d'autres fonctionnalités avancées, il est probable que vous devrez les désactiver.
Les avertissements peuvent être désactivés avec l'API de configuration publique, PublicConfigAPI , qui est exporté au niveau supérieur.
// in init script/application startup
import { PublicConfigAPI } from "react-imgix" ;
PublicConfigAPI . disableWarning ( '<warningName>' ) ;
//... rest of app startup
React . render ( ... ) ; Les avertissements peuvent également être activés avec PublicConfigAPI.enableWarning('<warningName>')
Les avertissements disponibles sont:
warningName | Description |
|---|---|
| calmackimage | Déclenché lorsqu'il n'y a pas de <img> ou <Imgix> à la fin des enfants lors de l'utilisation <Picture> . Une image de secours est cruciale pour s'assurer que l'image se rend correctement lorsque le navigateur ne peut pas correspondre aux sources fournies |
| tailles | Cette bibliothèque nécessite un accessoire sizes pour être passé afin que les images puissent rendre de manière responsable. Cela ne devrait que désactiver dans des circonstances très spéciales. |
| invalidarformat | Avertissements lancés lorsque le paramètre ar IMGIX n'est pas passé dans le bon format ( w:h ) |
| surdimensimition | Une erreur d'exécution s'est déclenchée lorsqu'une image se charge avec une taille intrinsèque sensiblement plus grande que la taille rendue. |
| lazylcp | Une erreur d'exécution déclenchée lorsqu'une image est détectée comme l'élément LCP mais est chargée de loading="lazy" . |
Cette version apporte l'API React-Imgix plus en ligne avec celle du service de rendu d'Imgix.
Le plus grand changement que les utilisateurs remarqueront est que le composant de ce projet ne générera plus un paramètre fit=crop par défaut. L'intention d'origine derrière cela était que les images générées maintiendraient un rapport d'aspect quand au moins une des dimensions a été spécifiée. Cependant, le comportement de l'API IMGIX par défaut définit fit=clip , qui se reflète maintenant dans ce projet. Bien que cela ne puisse pas provoquer des modifications de rupture pour tous les utilisateurs, cela peut entraîner un comportement d'image rendu inhabituel dans certains cas. En tant que tel, nous préférons se tromper du côté de la prudence et fournir aux utilisateurs la possibilité de se référer à ces modifications via une version majeure.
Si vous comptez actuellement sur la génération par défaut de fit=crop .
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
imgixParams = { { fit : "crop" } }
/> L'autre changement majeur concerne la façon dont le composant détermine le rapport d'aspect d'une image. Au lieu d'ajouter une valeur de hauteur calculée h= basée sur des dimensions spécifiées, la chaîne d'URL sera désormais construite en utilisant le paramètre du rapport d'aspect IMGIX ar= . Heureusement, l'interface pour spécifier un rapport d'aspect n'est pas différente avant. Cependant, les utilisateurs devront passer dans le paramètre fit=crop pour qu'il prenne effet:
< Imgix
src = "http://assets.imgix.net/examples/pione.jpg"
width = { 400 }
imgixParams = { { ar : "2:1" , fit : "crop" } }
/>Il s'agit d'une très grande mise à jour de cette bibliothèque avec de nombreux changements de rupture. Nous nous excusons pour tout problème que cela peut causer, et nous avons essayé de réduire le nombre de changements de rupture. Nous avons également travaillé pour regrouper tous ces changements en une seule version pour réduire ses impacts. Nous ne prévoyons pas d'effectuer des changements de rupture pendant un certain temps après cela et nous nous concentrons sur l'ajout de fonctionnalités.
Le changement le plus important dans cette bosse de version majeure est le passage au srcSet basé sur la largeur et sizes de réactivité. Cela présente une multitude d'avantages, notamment un meilleur rendu de serveurs, une meilleure réactivité, moins de potentiel de bogues et des améliorations des performances. Cela signifie que l'ancien comportement d'ajustement à la taille de la contexation a été supprimé. Si cela est nécessaire, un exemple de la façon dont cela peut être réalisé peut être trouvé ici
Pour passer à la version 8, les modifications suivantes doivent être apportées.
Un accessoire sizes doit être ajouté à toutes les usages de <Imgix> . Si sizes sont nouvelles pour vous (ou même si ce n'est pas le cas), l'article séminal d'Eric sur srcset et sizes est fortement recommandé.
Modifiez toutes les usages de type='picture' en <Picture> et type='source' en <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 >Voir la prise en charge de l'image pour plus d'informations.
Supprimez toute l'utilisation de type='bg' car elle n'est plus prise en charge. Il a été décidé qu'il était trop difficile de mettre en œuvre cette fonctionnalité de manière cohérente. Si vous souhaitez toujours utiliser cette fonctionnalité, veuillez donner un coup de pouce à ce problème: # 160 Si nous obtenons suffisamment de demandes pour cela, nous le réimplémenterons.
Retirez les accessoires aggressiveLoad , component , fluid , precision car ils ne sont plus utilisés.
Modifiez toutes les usages de defaultHeight et defaultWidth en width et height .
Renommez generateSrcSet pour disableSrcSet et inverser la valeur transmise comme valeur de l'hélice. c'est-à-dire generateSrcSet={false} devient disableSrcSet={true} ou tout simplement disableSrcSet
Si le support est nécessaire pour un navigateur qui ne prend pas en charge la nouvelle utilisation de SRCSET (tel que IE 11), nous avons recommandé d'ajouter un polyfill, comme le grand film d'image.
srcset , sizes ou picture se replieront gracieusement à l' img src par défaut, le cas échéant. Si vous souhaitez offrir une expérience entièrement appropriée à ces navigateurs, React-Imgix fonctionne très bien aux côtés de PictureFill!Ce support de navigateur est rendu possible par le grand support de Browserstack.
Merci à ces gens merveilleux (clé emoji):
Frederick Fogerty ? | sherwinski ? | Jason Eberle ? | Paille Paul ? | Kelly Sutton ? | Richard Bliss | Eric Koslow |
Baldur Helgason | Jonathan Schatz | Theo | Tanner ? | Nicholas Suski | voix up | Craig Kochis |
Dennis Schaaf | Andy Kent | Gabby losch | Stephen Cook ? | Eugene Nagorny | Samuel Giles | Espen Hovlandsdal |
Daniel Farrell | Luiz Fernando da Silva Cieslak | Nick Gottlieb | Pierre Grimaud | Luis H. Ball Jr. |
Ce projet suit les spécifications de tous les contributeurs. Contributions de tout accueil, mais veuillez consulter les directives de contribution avant de commencer!
React-Imgix a été créé à l'origine par Frederick Fogerty. Il est autorisé sous la licence ISC (voir le fichier de licence pour plus d'informations).
