react imgix
v9.10.0
react-imgix proporciona componentes personalizados para integrar IMGIX en sitios React y generar imágenes del lado del servidor.
Antes de comenzar con React-Imgix , es muy recomendable que lea el artículo seminal de Eric Portis sobre srcset y sizes . Este artículo explica la historia de las imágenes receptivas en el diseño receptivo, por qué son necesarios y cómo todas estas tecnologías funcionan juntas para ahorrar ancho de banda y proporcionar una mejor experiencia para los usuarios. El objetivo principal de React-IMGIX es facilitar estas herramientas para los desarrolladores, por lo que tener una comprensión de cómo funcionan mejorará significativamente su experiencia React-Imgix.
A continuación se muestran otros artículos que ayudan a explicar imágenes receptivas y cómo puede funcionar junto a Imgix:
<picture> . Discute las diferencias entre la dirección del arte y el cambio de resolución, y proporciona ejemplos de cómo lograr la dirección de arte con IMGIX.srcset e IMGIX. Una mirada a cómo imgix puede funcionar con srcset y sizes para servir la imagen correcta. npm install react-imgixyarn add react-imgixEste módulo exporta dos versiones transpiladas. Si se está utilizando un Bundler de ES6-Module-Award para consumir este módulo, recogerá una versión del módulo ES6 y puede realizar la sacudida de los árboles. Si no está usando módulos ES6, no tiene que hacer nada
import Imgix from "react-imgix" ;
// in react component
< Imgix src = { string } /> ; Para simplemente usar como usaría un <img> , React-Imgix se puede usar de la siguiente manera:
import Imgix from "react-imgix" ;
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" sizes = "100vw" /> ; Tenga en cuenta: 100vw es un valor sizes apropiado para una imagen de sangrado completo. Si su imagen no está completa, debe usar un valor diferente para sizes . El artículo "Srcset y tamaños" de Eric Portis se profundiza en cómo usar el atributo sizes .
Esto generará HTML similar al siguiente:
< 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,
...
"
/>Dado que IMGIX puede generar tantas resoluciones derivadas según sea necesario, React-IMGIX las calcula mediante programación, utilizando las dimensiones que especifica. Toda esta información se ha colocado en los atributos SRCSET y tamaños.
Ancho y altura conocidas y fijas: si el ancho y la altura se conocen de antemano, y se desea una imagen de tamaño fijo, se recomienda establecer explícitamente:
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 }
/> ; Cuando se especifican el ancho y la altura, <Imgix> le dará a la imagen un srcset con descriptores de resolución.
Ancho y altura conocidas pero fluidas: si se conocen el ancho y la altura intrínsecos de la imagen, pero se desea una imagen de tamaño fluido, el ancho y la altura aún deben establecerse para evitar el cambio de diseño, pero deben establecerse a través de htmlAttributes para no insinuar que <Imgix> para producir descriptores de resolución en el conjunto de 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 ,
} }
/> ; En este ejemplo, <Imgix> producirá un srcset con descriptores de ancho.
Tenga en cuenta que esta biblioteca no se ejecuta en los componentes del servidor, sino que agrega la directiva "Usar cliente" a los componentes. Esto significa que pueden usarse junto con los componentes del servidor (por ejemplo, como niños), pero aún requieren JavaScript del lado del cliente. Los componentes del cliente siguen siendo ssred.
React-Imgix también funciona bien en el servidor. Dado que React-Imgix usa srcset y sizes , permite que el navegador rinde la imagen de tamaño correcto inmediatamente después de que la página se haya cargado. Si son conocidos, pase el ancho y los atributos de altura a través de htmlAttributes para ayudar a combatir el desplazamiento del diseño.
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
htmlAttributes = { {
width : 400 ,
height : 250 ,
} }
/> ; Si el ancho y la altura se conocen de antemano, y se busca una imagen de tamaño fijo, establezca el ancho y la altura y no establezca 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 }
/> ; Este componente actúa dinámicamente por defecto. El componente aprovechará srcset y sizes para representar la imagen de tamaño correcto para su contenedor. Este es un ejemplo de este comportamiento receptivo.
sizes deben establecerse correctamente para que esto funcione bien, y se debe usar algunos estilos para establecer el tamaño del componente renderizado. Sin sizes y un estilo correcto, la imagen puede rendir a tamaño completo.
./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 > ; Relación de aspecto: un desarrollador puede pasar una relación de aspecto deseada, que se utilizará al generar SRCSET para cambiar el tamaño y recortar su imagen como se especifica. Para que el parámetro ar entra en vigencia, asegúrese de que el parámetro fit esté configurado para crop .
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
imgixParams = { { ar : "16:9" } }
/>
</ div > La relación de aspecto se especifica en el width:height . O la dimensión puede ser un entero o un flotador. Todos los siguientes son válidos: 16: 9, 5: 1, 1.92: 1, 1: 1.67.
Si no se desea la naturaleza dinámica de fluido explicada anteriormente, el ancho y la altura se pueden establecer explícitamente.
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 }
/> ; La representación de imagen fija agregará automáticamente un parámetro q variable asignado a cada parámetro dpr al generar un SRCSET. Esta técnica se usa comúnmente para compensar el aumento de los archivos de imágenes de alta DPR. Dado que las imágenes de alta DPR se muestran a una densidad de píxeles más alta en los dispositivos, la calidad de la imagen se puede reducir para reducir los archivos generales sin sacrificar la calidad visual percibida. Para obtener más información y ejemplos de esta técnica en acción, consulte esta publicación de blog. Este comportamiento respetará cualquier valor q primordial que se pase a través de imgixParams y se puede deshabilitar por completo con la propiedad booleana disableQualityByDPR .
< Imgix
src = "https://domain.imgix.net/image.jpg"
width = { 100 }
disableQualityByDPR
/>generará el siguiente 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 Las imágenes se pueden representar como un fondo detrás de los niños utilizando <Background /> . El componente medirá el tamaño natural del contenedor según lo determine el CSS en la página, y hará una imagen óptima para esas dimensiones.
Ejemplo:
// 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 > Este componente comparte muchos accesorios que se utilizan en el componente principal, como imgixParams y htmlAttributes .
Como el componente tiene que medir el elemento en el DOM, lo montará primero y luego volverá a renderizar con una imagen como imagen de fondo. Por lo tanto, esta técnica no funciona muy bien con la representación del servidor. Si desea que esto funcione bien con la representación del servidor, tendrá que establecer un ancho y altura manualmente.
Establecer ancho y altura:
Establecer el ancho y/o la altura explícitamente se recomienda si ya los conoce de antemano. Esto evitará que el componente tenga que hacer dos pases de renderizado, y hará una imagen de fondo de inmediato.
Esto se logra pasando w y h como accesorios para imgixparams.
< Background
src = "https://.../image.png"
imgixParams = { { w : 1920 , h : 500 } }
className = "blog-title"
>
< h2 > Blog Title </ h2 >
</ Background > Usando el elemento de imagen puede crear imágenes receptivas:
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 >Para reducir la duplicación en los accesorios, JSX admite la propagación del objeto para los accesorios:
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 >Se muestra una advertencia cuando no se pasa una imagen de respaldo. Esta advertencia se puede deshabilitar en circunstancias especiales. Para deshabilitar esta advertencia, mire en la sección de advertencias.
El componente de orden superior <ImgixProvider> (HOC) pone a disposición de sus accesorios a cualquier componente anidado <Imgix> en su aplicación React.
Por ejemplo, al representar <ImgixProvider> en el nivel superior de su aplicación con imgixParams definidos, todos sus componentes <Imgix> tendrán acceso a los mismos 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 ;Para que el HTML generado se vea como
< 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 > Puede aprovechar este comportamiento para usar URL parciales con el componente <Imgix> . Al definir el accesorio domain en el proveedor, se puede hacer accesible para todos los componentes anidados <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 > ;
{
/*... */
} Ambos componentes <Imgix> anteriores accederán al accesorio domain del proveedor y que sus rutas src relativas se resuelvan con el mismo dominio. Para que el HTML generado se vea como:
< 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 > Los accesorios que <ImgixProvider> hace accesible también pueden ser anulados por los componentes <Imgix> . Cualquier accesorio definido en el componente <Imgix> anulará el valor establecido por el proveedor.
// 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 > ;
{
/*... */
}Para que el HTML generado se vea como esto
< 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 > Para eliminar un accesorio compartido de un componente <Imgix> , el mismo accesorio se puede configurar en undefined en el componente mismo.
// 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 > ;
{
/*... */
}Para que el HTML generado se vea como esto:
< 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 > Puede anidar los componentes ImgixProvider para garantizar que los diferentes consumidores tengan diferentes accesorios.
Por ejemplo, para dar a los componentes Imgix diferentes accesorios de los componentes Picture , puede anidar un ImgixProvider dentro de otro.
El proveedor anidado cambiará el contexto para el componente Picture , esencialmente eliminará su acceso a los accesorios compartidos proporcionados por 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 >
)
} Aunque IMGIX está abierto a sugerencias de funciones, es posible que no aceptemos la función si es un caso de uso muy específico. Las características a continuación son ejemplos de lo que consideramos casos de uso avanzados generales. Nuestro objetivo aquí es admitir el 95% de todos los usos de elementos IMG, picture y source normales de img .
Si su característica deseada cae fuera de este porcentaje, ¡no se preocupe! Probablemente aún podrá lograr su característica con la API más potente de React-Impix: buildURL .
Esta biblioteca expone una función pura, buildURL , para generar URL IMGIX completas dado una URL base y algunos parámetros.
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.xLa URL base también puede contener parámetros de consulta. Estos serán anulados por cualquier parámetro pasado con el segundo parámetro.
Esta característica se puede usar para crear sus propios elementos img personalizados o para usar con otros componentes de imagen, como el componente de imagen de React-Bootstrap.
El parámetro ixlib puede ser deshabilitado por: buildURL(<url>, <params>, { disableLibraryParam: true })
Esta biblioteca permite al desarrollador pasar cualquier atributo que desee al elemento DOM subyacente con htmlAttributes .
Por ejemplo, si el desarrollador desea adjuntar una devolución de llamada onLoad personalizada a un componente img :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> Si desea obtener imágenes de carga perezosa, recomendamos usar la carga perezosa a nivel de navegador, con la propiedad loading , pasada en htmlAttributes :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/> Esta propiedad tiene un fuerte soporte de navegador y funciones sin JavaScript adicional. Además, el uso de la carga perezosa a nivel de navegador permite la optimización del atributo de tamaños con sizes="auto" , lo que permite al navegador calcular automáticamente el tamaño óptimo para la imagen en función de su diseño.
Si necesita un control granular sobre el comportamiento de carga perezosa, como la distancia de carga, puede usar la API del observador de intersección.
Si está utilizando una biblioteca como LazySizes, puede decirle al componente IMGIX que genere atributos compatibles en lugar de los tamaños src , srcset y sizes estándar cambiando algunas configuraciones de configuración:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> La misma configuración está disponible para los componentes <Source />
NB: se recomienda utilizar el complemento de cambio de atributo para capturar cambios en los atributos de datos:*. Sin esto, cambiar los accesorios a esta biblioteca no tendrá ningún efecto en la imagen renderizada.
Si desea usar imágenes LQIP, como antes, recomendamos usar LazySizes. Para usar React-IMGIX con LazySizes, simplemente puede decirle que genere atributos compatibles con LazySizes en lugar del src estándar, srcset y sizes cambiando algunas configuraciones de configuración y colocando la imagen de la imagen alternativa SRC en el Htmlattributes:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB: Si los accesorios de la imagen se cambian después de la primera carga, la imagen de baja calidad reemplazará la imagen de alta calidad. En este caso, el atributo src puede tener que establecerse modificando el DOM directamente, o la API LazySizes puede tener que llamarse manualmente después de que se cambien los accesorios. En cualquier caso, este comportamiento no es compatible con los mantenedores de la biblioteca, así que use bajo su propio riesgo.
Una ref pasada a React-Imgix usando <Imgix ref={handleRef}> adjuntará la referencia a la instancia <Imgix> , en lugar del elemento DOM. Es posible adjuntar una referencia al elemento DOM que se representa usando htmlAttributes :
< Imgix htmlAttributes = { { ref : handleRef } } >Esto también funciona para elementos de origen y imagen.
Estos accesorios se comparten entre los componentes IMGIX y fuente.
Por lo general, en la forma: https://[your_domain].imgix.net/[image] . No incluya ningún parámetro.
Requerido solo cuando se usa rutas parciales como accesorio src para un componente. Es decir, si src es "/images/myImage.jpg" , entonces el accesorio domain debe definirse.
Por ejemplo :
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > IMGIX Params para agregar a la imagen src .
Por ejemplo :
< Imgix imgixParams = { { mask : "ellipse" } } /> Especificó el tamaño esperado del desarrollador del elemento de imagen cuando se renderiza en la página. Similar al ancho. Por ejemplo, 100vw , calc(50vw - 50px) , 500px . Muy recomendable cuando no pase width o height . El artículo "Srcset y tamaños" de Eric Portis se profundiza en cómo usar el atributo sizes .
className aplicado al componente de nivel superior. Para establecer className en la imagen en sí, vea htmlAttributes .
Forzar que las imágenes tengan cierta altura.
Forcan las imágenes a ser un cierto ancho.
Deshabilitar la generación de conjuntos SRC de ancho variable para habilitar la capacidad de respuesta.
Por defecto, este componente agrega un parámetro a la URL generada para ayudar a IMGIX con análisis y soporte para esta biblioteca. Esto se puede deshabilitar estableciendo este accesorio en true .
Por defecto, este componente codifica la ruta de URL en el SRC y SRCSET. Esto se puede deshabilitar estableciendo este accesorio en true . Para obtener más información sobre cómo funciona la codificación de la ruta IMGIX, consulte los documentos IMGIX/JS-Core.
Cualquier otro atributo para agregar al nodo HTML (ejemplo: alt , data-* , className ).
Llamado a componentDidMount con el nodo DOM montado como argumento.
Permite que los atributos SRC, SRCSET y tamaños se reasignen a diferentes atributos HTML. Por ejemplo:
attributeConfig = { {
src : 'data-src' ,
srcSet : 'data-srcset' ,
sizes : 'data-sizes'
} } Esto vuelve a mapear src a data-src , srcset a data-srcset , etc.
Deshabilite la generación de parámetros q variables al hacer una imagen de tamaño fijo.
Permite personalizar el comportamiento de la generación SRCSET. Las opciones válidas son widths , widthTolerance , minWidth , maxWidth y devicePixelRatios . Consulte @imgix/js-core para la documentación de estas opciones.
className aplicado al componente de nivel superior. Para establecer className en la imagen en sí, vea htmlAttributes .
Llamado a componentDidMount con el nodo DOM montado como argumento.
Cualquier otro atributo para agregar al nodo HTML (ejemplo: alt , data-* , className ).
Por lo general, en la forma: https://[your_domain].imgix.net/[image] . No incluya ningún parámetro.
IMGIX Params para agregar a la imagen src . Así es como el ancho y la altura se pueden establecer explícitamente. Para obtener más información sobre esto, consulte la sección "Antecedentes" arriba.
Por ejemplo :
< Background imgixParams = { { mask : "ellipse" } } /> className aplicado al componente de nivel superior. Para establecer className en la imagen en sí, vea htmlAttributes .
Por defecto, este componente agrega un parámetro a la URL generada para ayudar a IMGIX con análisis y soporte para esta biblioteca. Esto se puede deshabilitar estableciendo este accesorio en true .
Cualquier otro atributo para agregar al nodo HTML (ejemplo: alt , data-* , className ).
Esta biblioteca desencadena algunas advertencias bajo ciertas situaciones para probar a los desarrolladores de ayuda en la actualización o para fallar. Estos a veces pueden ser incorrectos debido a la dificultad para detectar situaciones de error. Esto es molesto, por lo que hay una manera de apagarlos. Esto no se recomienda para principiantes, pero si está utilizando componentes personalizados u otras características avanzadas, es probable que tenga que apagarlos.
Las advertencias se pueden desactivar con la API de configuración pública, PublicConfigAPI , que se exporta en el nivel superior.
// in init script/application startup
import { PublicConfigAPI } from "react-imgix" ;
PublicConfigAPI . disableWarning ( '<warningName>' ) ;
//... rest of app startup
React . render ( ... ) ; Las advertencias también se pueden habilitar con PublicConfigAPI.enableWarning('<warningName>')
Las advertencias disponibles son:
warningName | Descripción |
|---|---|
| fallbackimage | Activado cuando no hay <img> o <Imgix> al final de los niños cuando se usa <Picture> . Una imagen respaldada es crucial para garantizar que la imagen se repite correctamente cuando el navegador no puede coincidir con las fuentes proporcionadas |
| Tamesattribute | Esta biblioteca requiere que se aprobe un accesorio sizes para que las imágenes puedan rendir de forma reclutada. Esto solo debería apagarse en circunstancias muy especiales. |
| invalidarFormat | Advertencias lanzadas cuando el parámetro ar IMGIX no se pasa en el formato correcto ( w:h ) |
| EMPARACIÓN DE EMPRESO | Un error de tiempo de ejecución se activó cuando una imagen se carga con un tamaño intrínseco sustancialmente más grande que el tamaño renderizado. |
| lazylcp | Un error de tiempo de ejecución se activa cuando se detecta una imagen como el elemento LCP pero se carga con loading="lazy" . |
Esta versión trae la API React-IMGIX más en línea con la del servicio de renderizado de IMGIX.
El cambio más grande que los usuarios notarán es que el componente de este proyecto ya no generará un parámetro fit=crop de ajuste predeterminado. La intención original detrás de esto era que las imágenes generadas mantendría una relación de aspecto cuando se especificó al menos una de las dimensiones. Sin embargo, el comportamiento de API IMGIX predeterminado establece fit=clip , que ahora se refleja en este proyecto. Aunque esto puede no causar cambios de ruptura para todos los usuarios, puede dar lugar a un comportamiento de imagen renderizado inusual en algunos casos. Como tal, preferiríamos errar por precaución y proporcionar a los usuarios la capacidad de optar por estos cambios a través de una versión importante.
Si actualmente confía en la generación predeterminada de fit=crop al renderizar imágenes, ahora tendrá que especificarlo manualmente al invocar el componente:
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
imgixParams = { { fit : "crop" } }
/> El otro cambio importante se relaciona con cómo el componente determina la relación de aspecto de una imagen. En lugar de agregar una altura calculada h= valor basado en dimensiones especificadas, la cadena URL ahora se construirá utilizando el parámetro de relación de aspecto IMGIX ar= . Afortunadamente, la interfaz para especificar una relación de aspecto no es diferente de antes. Sin embargo, los usuarios tendrán que pasar en el parámetro fit=crop para que surja efecto:
< Imgix
src = "http://assets.imgix.net/examples/pione.jpg"
width = { 400 }
imgixParams = { { ar : "2:1" , fit : "crop" } }
/>Esta es una actualización muy grande para esta biblioteca con muchos cambios de ruptura. Pedimos disculpas por cualquier problema que esto pueda causar, y hemos tratado de reducir la cantidad de cambios de ruptura. También hemos trabajado para agrupar todos estos cambios en una sola versión para reducir sus impactos. No planeamos hacer cambios de ruptura durante un tiempo después de esto, y nos centraremos en agregar características.
El mayor cambio en este aumento de la versión principal es el movimiento hacia srcSet basado en el ancho y sizes para la capacidad de respuesta. Esto tiene una gran cantidad de beneficios, incluida una mejor representación del servidor, una mejor capacidad de respuesta, menos potencial para errores y mejoras en el rendimiento. Esto significa que se ha eliminado el antiguo comportamiento de ajuste al contenedor. Si esto es necesario, un ejemplo de cómo se puede lograr esto se puede encontrar aquí
Para actualizar a la versión 8, se deben realizar los siguientes cambios.
Se debe agregar un accesorio sizes a todos los usos de <Imgix> . Si sizes es nuevo para usted (o incluso si no lo es), el artículo seminal de Eric sobre srcset y sizes es muy recomendable.
Cambie todos los usos de type='picture' a <Picture> y type='source' a <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 >Consulte el soporte de la imagen para más información.
Elimine todo el uso de type='bg' ya que ya no es compatible. Se decidió que era demasiado difícil implementar esta función de manera consistente. Si aún desea usar esta función, por favor le otorgue este problema: #160 si recibimos suficientes solicitudes para esto, la volveremos a implementar.
Elimine los accesorios aggressiveLoad , component , fluid , precision ya que ya no se usan.
Cambie todos los usos de defaultHeight y defaultWidth a los accesorios width y height .
Rename generateSrcSet para disableSrcSet e invertir el valor transmitido como el valor del PROP. es decir, generateSrcSet={false} se convierte en disableSrcSet={true} o simplemente disableSrcSet
Si se necesita soporte para un navegador que no admite el nuevo uso de SRCSET (como IE 11), recomendamos agregar un polyfill, como el excelente cuadro de imágenes.
srcset , sizes o picture recurrirán con gracia al img src predeterminado cuando sea apropiado. Si desea proporcionar una experiencia totalmente respondida para estos navegadores, ¡React-Imgix funciona muy bien junto con Picturefill!Este soporte de navegador es posible por el gran apoyo de Browserstack.
Gracias a estas maravillosas personas (Key Emoji):
Frederick Fogerty ? | sherwinski ? | Jason Eberle ? | Paja de Paul ? | Kelly Sutton ? | Richard Bliss | Eric Koslow |
Baldur Helgason | Jonathan Schatz | Teo | Bronceador ? | Nicholas Suski | voz alta | 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. |
Este proyecto sigue la especificación de todos los contribuyentes. Contribuciones de cualquier tipo bienvenido, pero revise las pautas de contribución antes de comenzar.
React-Imgix fue creado originalmente por Frederick Fogerty. Tiene licencia bajo la licencia ISC (consulte el archivo de licencia para obtener más información).
