react imgix
v9.10.0
react-imgix bietet benutzerdefinierte Komponenten für die Integration von IMGIX in React-Sites und das Generieren von Images Server-Side.
Bevor Sie mit React-Imgix beginnen , wird dringend empfohlen , Eric Portis 'wegweisende Artikel über srcset und sizes zu lesen. In diesem Artikel wird die Geschichte reaktionsschneller Bilder in reaktionsschnellem Design erläutert, warum sie notwendig sind und wie all diese Technologien zusammenarbeiten, um die Bandbreite zu retten und den Benutzern eine bessere Erfahrung zu bieten. Das Hauptziel von React-Imgix ist es, diesen Tools den Entwicklern die Implementierung zu erleichtern. Wenn Sie also verstehen, wie sie arbeiten, verbessert sie Ihre React-Imgix-Erfahrung erheblich.
Im Folgenden finden Sie einige andere Artikel, die dazu beitragen, reaktionsschnelle Bilder zu erklären, und wie es neben IMGIX funktionieren kann:
<picture> . Erörtert die Unterschiede zwischen Kunstrichtung und Auflösungsumschaltung und liefert Beispiele für die Erreichung der Kunstrichtung mit IMGIX.srcset und iMgix. Ein Blick darauf, wie IMGIX mit srcset und sizes funktionieren kann, um das richtige Bild zu liefern. npm install react-imgixyarn add react-imgixDieses Modul exportiert zwei transpilierte Versionen. Wenn ein ES6-Modul-bewusster Bundler verwendet wird, um dieses Modul zu konsumieren, wird eine ES6-Modulversion aufgenommen und kann Baumschütteln durchführen. Wenn Sie keine ES6 -Module verwenden, müssen Sie nichts tun
import Imgix from "react-imgix" ;
// in react component
< Imgix src = { string } /> ; Um einfach zu verwenden, wie Sie ein <img> verwenden würden, kann React-Imgix wie folgt verwendet werden:
import Imgix from "react-imgix" ;
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" sizes = "100vw" /> ; Bitte beachten Sie: 100vw ist ein geeigneter sizes für ein vollblendiges Bild. Wenn Ihr Bild nicht in vollem Umfang blockiert ist, sollten Sie einen anderen Wert für sizes verwenden. Der Artikel von Eric Portis "Srcset and Größen" ist in der Tiefe der Verwendung des sizes .
Dies erzeugt HTML ähnlich wie folgt:
< 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,
...
"
/>Da IMGIX nach Bedarf so viele Ableitungen erzeugen kann, berechnet React-Imgix sie programmgesteuert unter Verwendung der von Ihnen angegebenen Abmessungen. Alle diese Informationen wurden in die SRCSet- und Größenattribute eingebaut.
Breite und Höhe bekannt und fest: Wenn die Breite und Höhe zuvor bekannt sind und ein Bild mit fester Größe gewünscht wird, wird empfohlen, explizit eingestellt zu werden:
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 }
/> ; Wenn Breite und Höhe angegeben werden, gibt <Imgix> dem Bild ein SRCSet mit Auflösungsdeskriptoren.
Breite und Höhe bekannt, aber flüssig: Wenn die intrinsische Breite und Höhe des Bildes bekannt sind, aber ein Bild mit Flüssigkeitsgröße gewünscht wird, sollte Breite und Höhe weiterhin eingestellt werden, um eine Verschiebung von Layout zu vermeiden. Sie müssen jedoch über htmlAttributes eingestellt werden, um nicht auf <Imgix> zu hinweisen, um Auflösungsdeskriptoren im SRCset zu erstellen.
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 ,
} }
/> ; In diesem Beispiel erzeugt <Imgix> ein SRCSet mit Breitendeskriptoren.
Beachten Sie, dass diese Bibliothek nicht in Serverkomponenten ausgeführt wird, sondern die Anweisung "Client verwenden" zu Komponenten hinzugefügt wird. Dies bedeutet, dass sie neben Serverkomponenten (z. B. als Kinder) verwendet werden können, aber sie erfordern immer noch clientseitige JavaScript. Client -Komponenten sind weiterhin SSRED.
React-Imgix funktioniert auch gut auf dem Server. Da React-Imgix srcset und sizes verwendet, kann der Browser das Bild mit korrekter Größe unmittelbar nach dem Laden der Seite rendern. Wenn sie bekannt sind, können Sie die Breite und Höhenattribute über htmlAttributes zur Bekämpfung der Verschiebung der Layout helfen.
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
htmlAttributes = { {
width : 400 ,
height : 250 ,
} }
/> ; Wenn die Breite und Höhe zuvor bekannt sind und ein Bild fester Größe gewünscht wird, setzen Sie Breite und Höhe und setzen Sie keine sizes fest:
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 }
/> ; Diese Komponente wirkt standardmäßig dynamisch. Die Komponente nutzt srcset und sizes , um das Bild der richtigen Größe für seinen Container zu rendern. Dies ist ein Beispiel für dieses reaktionsschnelle Verhalten.
sizes sollten ordnungsgemäß eingestellt werden, damit dies gut funktioniert, und ein gewisses Styling sollte verwendet werden, um die Größe der gebrauchten Komponente festzulegen. Ohne sizes und korrektes Styling kann das Bild in voller Größe auftreten.
./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 > ; Seitenverhältnis: Ein Entwickler kann ein gewünschtes Seitenverhältnis übergeben, das bei der Erzeugung von SRCsets zur Größe und Ernte Ihres Bildes wie angegeben verwendet wird. Damit der ar -Parameter wirksam wird, stellen Sie sicher, dass der fit auf crop eingestellt ist.
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
imgixParams = { { ar : "16:9" } }
/>
</ div > Das Seitenverhältnis wird in Formatbreite angegeben width:height . Entweder können Dimension eine Ganzzahl oder ein Schwimmer sein. Alle folgenden sind gültig: 16: 9, 5: 1, 1,92: 1, 1: 1,67.
Wenn die oben erläuterte dynamische Natur nicht erwünscht ist, kann die Breite und Höhe explizit eingestellt werden.
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 }
/> ; Das feste Bildrendern wird automatisch einen Variablen q -Parameter angehängt, der jedem dpr -Parameter bei der Generierung eines SRCSet zugeordnet ist. Diese Technik wird üblicherweise verwendet, um die erhöhte Dateigröße von High-DPR-Bildern zu kompensieren. Da High-DPR-Bilder auf einer höheren Pixeldichte auf Geräten angezeigt werden, kann die Bildqualität gesenkt werden, um die Gesamtdateigröße zu verringern, ohne die wahrgenommene visuelle Qualität zu beeinträchtigen. Weitere Informationen und Beispiele für diese Technik in Aktion finden Sie in diesem Blog -Beitrag. Dieses Verhalten respektiert jeden übergeordneten q -Wert, der über imgixParams übergeben wurde, und kann mit der Booleschen Eigenschaft disableQualityByDPR insgesamt deaktiviert werden.
< Imgix
src = "https://domain.imgix.net/image.jpg"
width = { 100 }
disableQualityByDPR
/>Erzeugt das folgende 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 Bilder können als Hintergrund hinter Kindern unter Verwendung von <Background /> wiedergegeben werden. Die Komponente misst die natürliche Größe des Behälters, die vom CSS auf der Seite bestimmt wird, und macht ein optimales Bild für diese Dimensionen.
Beispiel:
// 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 > Diese Komponente teilt viele Requisiten, die in der Hauptkomponente verwendet werden, z. B. imgixParams und htmlAttributes .
Da die Komponente das Element im DOM messen muss, montiert sie es zuerst und dann mit einem Bild als Hintergrundbild neu. Daher funktioniert diese Technik nicht sehr gut mit dem Serverwechsel. Wenn Sie möchten, dass dies mit dem Server -Rendering gut funktioniert, müssen Sie eine Breite und Höhe manuell festlegen.
Breite und Höhe festlegen:
Das Einstellen der Breite und/oder Höhe wird explizit empfohlen, wenn Sie diese bereits zuvor kennen. Dadurch wird die Komponente vor zwei Rendern -Pässen gespeichert, und es wird ein Hintergrundbild sofort erzeugt.
Dies wird erreicht, indem w und h als Requisiten an IMGIXPARAMS übergeben werden.
< Background
src = "https://.../image.png"
imgixParams = { { w : 1920 , h : 500 } }
className = "blog-title"
>
< h2 > Blog Title </ h2 >
</ Background > Mit dem Bildelement können Sie reaktionsschnelle Bilder erstellen:
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 >Um die Duplikation in Requisiten zu verringern, unterstützt JSX die Objektverteilung für Requisiten:
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 >Eine Warnung wird angezeigt, wenn kein Fallback -Bild weitergegeben wird. Diese Warnung kann unter besonderen Umständen deaktiviert werden. Um diese Warnung zu deaktivieren, schauen Sie sich im Abschnitt Warnungen an.
Die <ImgixProvider> höhere Ordnungskomponente (HOC) stellt seine Requisiten für jede verschachtelte <Imgix> -Komponente in Ihrer React -Anwendung zur Verfügung.
Wenn Sie beispielsweise <ImgixProvider> auf der oberen Ebene Ihrer Anwendung mit imgixParams definiert rendern, haben alle Ihre <Imgix> -Komponenten Zugriff auf die gleichen 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 ;So dass das generierte HTML so etwas aussieht wie
< 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 > Sie können dieses Verhalten nutzen, um partielle URLs mit der <Imgix> -Komponente zu verwenden. Durch die Definieren der domain -Propie auf dem Anbieter kann sie für alle verschachtelten <Imgix> -Komponenten zugänglich gemacht werden.
// 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 > ;
{
/*... */
} Sowohl die oben <Imgix> -Komponenten zugreifen vom Anbieter auf die domain und lassen ihre relativen src -Pfade auf dieselbe Domäne auflösen. Damit der generierte HTML ähnlich aussieht wie:
< 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 > Die Requisiten, die <ImgixProvider> zugänglich macht, können auch durch <Imgix> -Komponenten überschrieben werden. Jede auf der <Imgix> -Komponente definierte Requisite überschreibt den vom Anbieter festgelegten Wert.
// 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 > ;
{
/*... */
}So dass der generierte HTML so ungefähr so aussieht
< 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 > Um eine gemeinsam genutzte Prop aus einer <Imgix> -Komponente zu entfernen, kann dieselbe Requisite auf undefined in der Komponente selbst eingestellt werden.
// 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 > ;
{
/*... */
}Damit der generierte HTML so etwas aussieht:
< 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 > Sie können ImgixProvider -Komponenten nisten, um sicherzustellen, dass verschiedene Verbraucher unterschiedliche Requisiten haben.
Um beispielsweise Imgix -Komponenten unterschiedliche Requisiten aus Picture zu geben, können Sie einen ImgixProvider in einem anderen nisten.
Der verschachtelte Anbieter ändert den Kontext für die Picture und beseitigt im Wesentlichen seinen Zugriff auf die gemeinsamen Requisiten, die vom Root ImgixProvider bereitgestellt werden.
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 >
)
} Obwohl IMGIX offen für Feature -Vorschläge ist, akzeptieren wir die Funktion möglicherweise nicht, wenn es sich um einen sehr spezifischen Anwendungsfall handelt. Die folgenden Funktionen sind Beispiele für die allgemeinen erweiterten Anwendungsfälle. Unser Ziel hier ist es, 95% aller Verwendungen normaler img , picture und source zu unterstützen.
Wenn Ihre gewünschte Funktion außerhalb dieses Prozentsatzes fällt, machen Sie sich keine Sorgen! Sie werden wahrscheinlich immer noch in der Lage sein, Ihre Funktion mit React-Imgixs leistungsfähigerer API: buildURL zu erreichen.
Diese Bibliothek enthüllt eine reine Funktion, buildURL , um vollständige IMGIX -URLs mit einer Basis -URL und einigen Parametern zu erzeugen.
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.xDie Basis -URL kann auch Abfrageparameter enthalten. Diese werden durch alle Parameter, die mit dem zweiten Parameter übergeben wurden, überschrieben.
Diese Funktion kann verwendet werden, um Ihre eigenen benutzerdefinierten img Elemente zu erstellen oder mit anderen Bildkomponenten wie der Bildkomponente von React-Bootstrap zu verwenden.
Der ixlib -Parameter kann deaktiviert werden durch: buildURL(<url>, <params>, { disableLibraryParam: true })
Mit dieser Bibliothek kann der Entwickler jedes Attribut, das er mag, an das zugrunde liegende DOM -Element mit htmlAttributes übergeben.
Wenn der Entwickler beispielsweise einen benutzerdefinierten onLoad -Rückruf an eine img -Komponente anschließen möchte:
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> Wenn Sie faule Ladenbilder möchten, empfehlen wir, ein faules Laden in Browserebene mit der loading zu verwenden, die in htmlAttributes übergeben wird:
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/> Diese Eigenschaft hat eine starke Browserunterstützung und funktioniert ohne zusätzliche JavaScript. Durch die Verwendung von Browser-Ebenen faulen Ladens ermöglicht die Optimierung des Größenattributs mit sizes="auto" , mit der der Browser die optimale Größe für das Bild basierend auf seinem Layout automatisch berechnet.
Wenn Sie eine körnige Kontrolle über faules Ladungsverhalten wie den Ladeabstand benötigen, können Sie die Schnittstelle-Observer-API verwenden.
Wenn Sie eine Bibliothek wie Lazysize verwenden, können Sie die IMGIX -Komponente angeben, dass sie kompatible Attribute anstelle des Standard src , srcset und sizes erzeugen, indem Sie einige Konfigurationseinstellungen ändern:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> Die gleiche Konfiguration ist für <Source /> Komponenten verfügbar
NB: Es wird empfohlen, das Attribut-Änderungs-Plugin zu verwenden, um Änderungen in den Datenattributen zu erfassen. Ohne dies hat das Ändern der Requisiten in diese Bibliothek keinen Einfluss auf das gerenderte Bild.
Wenn Sie LQIP -Bilder wie zuvor verwenden möchten, empfehlen wir, Lazysize zu verwenden. Um React-Imgix mit Lazysize zu verwenden, können Sie einfach angeben, dass sie lazysize-kompatible Attribute anstelle des Standard- src , srcset und sizes erzeugen, indem einige Konfigurationseinstellungen geändert und das Fallback-Bild SRC in die HTMLATTTRIBUTS platziert werden:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB: Wenn die Requisiten des Bildes nach der ersten Last geändert werden, ersetzt das Bild von geringer Qualität das hochwertige Bild. In diesem Fall muss das src -Attribut möglicherweise eingestellt werden, indem das DOM direkt geändert wird, oder die Lazysize -API muss möglicherweise manuell aufgerufen werden, nachdem die Requisiten geändert wurden. In jedem Fall wird dieses Verhalten nicht von den Bibliotheksbeteiligern unterstützt. Verwenden Sie daher auf eigenes Risiko.
Ein ref übergeben an React-Imgix mit <Imgix ref={handleRef}> wird der Ref an die <Imgix> -Instanz und nicht an das DOM-Element angehängt. Es ist möglich, einen Ref an das DOM -Element anzuhängen, das mit htmlAttributes gerendert wird:
< Imgix htmlAttributes = { { ref : handleRef } } >Dies funktioniert auch für Quell- und Bildelemente.
Diese Requisiten werden unter IMGIX- und Quellkomponenten geteilt
Normalerweise in der Form: https://[your_domain].imgix.net/[image] . Fügen Sie keine Parameter ein.
Erforderlich nur bei Verwendung von Teilpfaden als src -Prop für eine Komponente. Wenn src "/images/myImage.jpg" ist, muss die domain -Requisite definiert werden.
Zum Beispiel :
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > IMGIX -Params zum Hinzufügen zum Bild src .
Zum Beispiel :
< Imgix imgixParams = { { mask : "ellipse" } } /> Spezifizierte die erwartete Größe des Bildungselements des Entwicklers, wenn sie auf der Seite gerendert werden. Ähnlich wie Breite. ZB 100vw , calc(50vw - 50px) , 500px . Sehr empfohlen, wenn Sie keine width oder height übergeben. Der Artikel von Eric Portis "Srcset and Größen" ist in der Tiefe der Verwendung des sizes .
className für die oberste Ebenekomponente angewendet. Um className auf dem Bild selbst festzulegen, siehe htmlAttributes .
Erzwingen Sie, dass Bilder eine bestimmte Höhe sein.
Erzwingen Sie, dass Bilder eine bestimmte Breite sein.
Deaktivieren Sie die Erzeugung variabler Breite SRC -Sets, um die Reaktionsfähigkeit zu ermöglichen.
Standardmäßig fügt diese Komponente der generierten URL einen Parameter hinzu, um IMGIX bei der Analyse und Unterstützung für diese Bibliothek zu unterstützen. Dies kann deaktiviert werden, indem diese Requisite auf true festgelegt wird.
Standardmäßig codiert diese Komponente den URL -Pfad im SRC und SRCSET. Dies kann deaktiviert werden, indem diese Requisite auf true festgelegt wird. Weitere Informationen zur Funktionsweise von IMGIX-Pfadcodierung finden Sie in den IMGIX/JS-CORE-Dokumenten.
Alle anderen Attribute zum Hinzufügen zum HTML-Knoten (Beispiel: alt , data-* , className ).
Aufgerufene componentDidMount mit dem montierten DOM -Knoten als Argument.
Ermöglicht die SRC-, SRCSET- und Größenattribute in verschiedenen HTML -Attributen. Zum Beispiel:
attributeConfig = { {
src : 'data-src' ,
srcSet : 'data-srcset' ,
sizes : 'data-sizes'
} } Dies mapt SRC in data-src , SRCSET data-srcset usw. um.
Deaktivieren Sie die Erzeugung von variablen q Parametern beim Rendern eines Bildes mit fester Größe.
Ermöglicht das Anpassen des Verhaltens der SRCSET -Generierung. Gültige Optionen sind widths , widthTolerance , minWidth , maxWidth und devicePixelRatios . In @Imgix/JS-Core finden Sie die Dokumentation dieser Optionen.
className für die oberste Ebenekomponente angewendet. Um className auf dem Bild selbst festzulegen, siehe htmlAttributes .
Aufgerufene componentDidMount mit dem montierten DOM -Knoten als Argument.
Alle anderen Attribute zum Hinzufügen zum HTML-Knoten (Beispiel: alt , data-* , className ).
Normalerweise in der Form: https://[your_domain].imgix.net/[image] . Fügen Sie keine Parameter ein.
IMGIX -Params zum Hinzufügen zum Bild src . So können auch Breite und Höhe explizit eingestellt werden. Weitere Informationen hierzu finden Sie im Abschnitt "Hintergrund" oben.
Zum Beispiel :
< Background imgixParams = { { mask : "ellipse" } } /> className für die oberste Ebenekomponente angewendet. Um className auf dem Bild selbst festzulegen, siehe htmlAttributes .
Standardmäßig fügt diese Komponente der generierten URL einen Parameter hinzu, um IMGIX bei der Analyse und Unterstützung für diese Bibliothek zu unterstützen. Dies kann deaktiviert werden, indem diese Requisite auf true festgelegt wird.
Alle anderen Attribute zum Hinzufügen zum HTML-Knoten (Beispiel: alt , data-* , className ).
Diese Bibliothek löst einige Warnungen in bestimmten Situationen aus, um Entwicklern bei der Upgrade oder beim Fehlschlag zu probieren. Diese können manchmal aufgrund der Schwierigkeit bei der Erkennung von Fehlersituationen falsch sein. Das ist ärgerlich und so gibt es eine Möglichkeit, sie auszuschalten. Dies wird für Anfänger nicht empfohlen. Wenn Sie jedoch benutzerdefinierte Komponenten oder andere erweiterte Funktionen verwenden, müssen Sie sie wahrscheinlich ausschalten.
Warnungen können mit der öffentlichen Konfigurations-API PublicConfigAPI ausgeschaltet werden, die auf der obersten Ebene exportiert wird.
// in init script/application startup
import { PublicConfigAPI } from "react-imgix" ;
PublicConfigAPI . disableWarning ( '<warningName>' ) ;
//... rest of app startup
React . render ( ... ) ; Warnungen können auch mit PublicConfigAPI.enableWarning('<warningName>')
Die verfügbaren Warnungen sind:
warningName | Beschreibung |
|---|---|
| Fallbackimage | Ausgelöst <Picture> <img> <Imgix> am Ende der Kinder keine gibt. Ein Fallback -Bild ist entscheidend, um sicherzustellen |
| Größenattribute | Diese Bibliothek erfordert, dass eine sizes -Requisiten übergeben werden, damit die Bilder reaktionsmäßig reaktionsfähig machen können. Dies sollte nur unter besonderen Umständen ausgeschaltet werden. |
| InvalyArformat | Warnungen geworfen, wenn der ar -IMGIX -Parameter nicht im richtigen Format übergeben wird ( w:h ) |
| Otsizeimage | Ein Laufzeitfehler ausgelöst, wenn ein Bild mit einer intrinsischen Größe lädt, die wesentlich größer ist als die gerenderte Größe. |
| Lazylcp | Ein Laufzeitfehler, der ausgelöst wird, wenn ein Bild als LCP -Element erkannt wird, aber mit loading="lazy" geladen wird. |
Diese Veröffentlichung bringt die React-Imgix-API mehr im Inline mit dem des Rendering-Dienstes von IMGIX.
Der größte Änderungswechsel wird feststellen, dass die Komponente dieses Projekts keinen Standard fit=crop -Parameter mehr generiert. Die ursprüngliche Absicht dahinter war, dass erzeugte Bilder das Seitenverhältnis beibehalten würden, wenn mindestens eine der Dimensionen angegeben wurde. Die Standard -IMGIX -API -Verhaltenssätze fit=clip , die sich jetzt in diesem Projekt widerspiegelt. Obwohl dies möglicherweise nicht zu Bruchänderungen für alle Benutzer führt, kann dies in einigen Fällen zu einem ungewöhnlichen Bildverhalten führen. Als solches würden wir uns lieber auf die Vorsicht irren und den Benutzern die Möglichkeit geben, diese Änderungen über eine große Veröffentlichung zu entscheiden.
Wenn Sie sich derzeit auf die Standardgenerierung von fit=crop beim Rendern von Bildern verlassen, müssen Sie sie jetzt manuell angeben, wenn Sie die Komponente aufrufen:
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
imgixParams = { { fit : "crop" } }
/> Die andere Hauptänderung bezieht sich darauf, wie die Komponente das Seitenverhältnis eines Bildes bestimmt. Anstatt eine berechnete Höhe h= Wert basierend auf angegebenen Abmessungen anzuhängen, wird die URL -Zeichenfolge nun unter Verwendung des Parameters des IMGIX -Seitenverhältnisses ar= erstellt. Glücklicherweise unterscheidet sich die Schnittstelle zur Angabe eines Seitenverhältnisses nicht von zuvor. Benutzer müssen jedoch den Parameter fit=crop übergeben, damit er wirksam wird:
< Imgix
src = "http://assets.imgix.net/examples/pione.jpg"
width = { 400 }
imgixParams = { { ar : "2:1" , fit : "crop" } }
/>Dies ist ein sehr großes Update dieser Bibliothek mit vielen Bruchänderungen. Wir entschuldigen uns für alle Probleme, die dies verursachen kann, und wir haben versucht, die Anzahl der Veränderungen zu verringern. Wir haben auch daran gearbeitet, all diese Veränderungen in eine Veröffentlichung zu verwandeln, um die Auswirkungen zu verringern. Wir planen nicht, danach eine Weile zu brechen, und werden auf das Hinzufügen von Funktionen konzentrieren.
Die größte Veränderung in dieser Hauptversions-Beule ist der Wechsel zu Breite auf srcSet und sizes für die Reaktionsfähigkeit. Dies hat eine Vielzahl von Vorteilen, einschließlich besserer Serverwiedergabe, besserer Reaktionsfähigkeit, weniger Potenzial für Fehler und Leistungsverbesserungen. Dies bedeutet, dass das Verhalten der alten Anpassung zu Container-Größe entfernt wurde. Wenn dies erforderlich ist, finden Sie hier ein Beispiel dafür, wie dies erreicht werden kann
Um auf Version 8 zu aktualisieren, sollten die folgenden Änderungen vorgenommen werden.
Alle Verwendungen von <Imgix> sollten eine sizes hinzugefügt werden. Wenn sizes für Sie neu sind (oder auch wenn dies nicht der Fall ist), wird Erics wegweisender Artikel über srcset und sizes sehr empfohlen.
Ändern Sie alle Verwendungen von type='picture' in <Picture> und type='source' in <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 >Weitere Informationen finden Sie unter Bildunterstützung.
Entfernen Sie die gesamte Verwendung von type='bg' da es nicht mehr unterstützt wird. Es wurde entschieden, dass es zu schwierig war, diese Funktion konsequent zu implementieren. Wenn Sie diese Funktion noch verwenden möchten, geben Sie diesem Problem bitte einen Daumen nach oben: #160, wenn wir genug Anfragen dafür erhalten, werden wir es erneut implementieren.
Entfernen Sie Requisiten aggressiveLoad , component , fluid und precision , da sie nicht mehr verwendet werden.
Ändern Sie alle Verwendungen von defaultHeight und defaultWidth in width und height .
Umbename generateSrcSet , um den Wert als Stützwert disableSrcSet und umzusetzen. IE generateSrcSet={false} wird disableSrcSet={true} oder einfach disableSrcSet
Wenn für einen Browser Unterstützung benötigt wird, der die neue Verwendung von SRCSET (z. B. IE 11) nicht unterstützt, haben wir empfohlen, eine Polyfill hinzuzufügen, wie z. B. die große Bildfunktion.
srcset , sizes oder picture nicht unterstützen, gegebenenfalls anmutig auf das Standard img src zurück. Wenn Sie diesen Browsern ein vollverantwortliches Erlebnis bieten möchten, funktioniert React-Imgix neben PictureFill großartig!Diese Browser -Unterstützung wird durch die große Unterstützung von BrowsStack ermöglicht.
Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):
Frederick Fogerty ? | Sherwinski ? | Jason Eberle ? | Paul Stroh ? | Kelly Sutton ? | Richard Bliss | Eric Koslow |
Baldur Helgason | Jonathan Schatz | Theo | Gerber -Rühre ? | Nicholas Suski | Voiceup | 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. |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen, aber bitte überprüfen Sie die Beitragsrichtlinien, bevor Sie anfangen!
React-Imgix wurde ursprünglich von Frederick Fogerty erstellt. Es ist unter der ISC -Lizenz lizenziert (finden Sie in der Lizenzdatei für weitere Informationen).
