react imgix
v9.10.0
react-imgix fornece componentes personalizados para integrar o imgix nos sites do React e gerar imagens no lado do servidor.
Antes de começar com o React-Imgix , é altamente recomendável que você leia o artigo seminal de Eric Portis sobre srcset e sizes . Este artigo explica a história das imagens responsivas em design responsivo, por que são necessárias e como todas essas tecnologias funcionam juntas para salvar a largura de banda e proporcionar uma melhor experiência para os usuários. O objetivo principal do React-IMGIX é facilitar essas ferramentas para os desenvolvedores implementarem, portanto, entender como eles funcionam melhorará significativamente sua experiência react-imgix.
Abaixo estão alguns outros artigos que ajudam a explicar imagens responsivas e como elas podem funcionar ao lado do imgix:
<picture> . Discute as diferenças entre a direção da arte e a troca de resolução e fornece exemplos de como realizar a direção de arte com o IMGIX.srcset e imgix. Uma olhada em como o imgix pode funcionar com srcset e sizes para servir a imagem certa. npm install react-imgixyarn add react-imgixEste módulo exporta duas versões transpiladas. Se um empuxo ES6-Module, ele estiver sendo usado para consumir este módulo, ele captará uma versão do módulo ES6 e poderá executar o troca de árvores. Se você não está usando módulos ES6, não precisa fazer nada
import Imgix from "react-imgix" ;
// in react component
< Imgix src = { string } /> ; Para simplesmente usar como você usaria um <img> , o React-Imgix pode ser usado da seguinte maneira:
import Imgix from "react-imgix" ;
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" sizes = "100vw" /> ; Observação: 100vw é um valor sizes apropriado para uma imagem completa. Se a sua imagem não estiver cheia, você deve usar um valor diferente para sizes . O artigo "SRCSET e tamanhos" de Eric Portis aproveita como usar o atributo sizes .
Isso gerará HTML semelhante ao seguinte:
< 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,
...
"
/>Como o IMGIX pode gerar quantas resoluções derivadas forem necessárias, o React-Imgix as calcula programaticamente, usando as dimensões que você especificar. Todas essas informações foram colocadas nos atributos SRCSET e tamanhos.
Largura e altura conhecidas e fixas: se a largura e a altura forem conhecidas com antecedência, e uma imagem de tamanho fixo for desejado, é recomendável que eles sejam definidos explicitamente:
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 }
/> ; Quando a largura e a altura forem especificadas, <Imgix> dará à imagem um SRCSET com descritores de resolução.
Largura e altura conhecidas, mas fluidas: se a largura e a altura intrínsecas da imagem forem conhecidas, mas uma imagem de tamanho de fluido é desejada, a largura e a altura ainda devem ser definidas para evitar a mudança de layout, mas elas devem ser definidas por meio de htmlAttributes para não sugerir <Imgix> para produzir descritores de resolução no 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 ,
} }
/> ; Neste exemplo, <Imgix> produzirá um srcset com descritores de largura.
Nota Esta biblioteca não é executada nos componentes do servidor, mas adiciona a diretiva "Use Client" aos componentes. Isso significa que eles podem ser usados juntamente com os componentes do servidor (por exemplo, quando crianças), mas ainda exigem JavaScript do lado do cliente. Os componentes do cliente ainda são Ssred.
O React-Imgix também funciona bem no servidor. Como o React-IMGIX usa srcset e sizes , ele permite que o navegador renderize a imagem de tamanho correto imediatamente após o carregamento da página. Se eles forem conhecidos, passe a largura e a altura atributos via htmlAttributes para ajudar a combater a mudança de layout.
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
htmlAttributes = { {
width : 400 ,
height : 250 ,
} }
/> ; Se a largura e a altura forem conhecidas com antecedência, e uma imagem de tamanho fixo for desejada, defina a largura e a altura e não defina 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 age dinamicamente por padrão. O componente aproveitará srcset e sizes para renderizar a imagem de tamanho certo para seu contêiner. Este é um exemplo desse comportamento responsivo.
sizes devem ser definidos corretamente para que isso funcione bem, e algum estilo deve ser usado para definir o tamanho do componente renderizado. Sem sizes e estilo correto, a imagem pode renderizar em tamanho real.
./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 > ; Razão de aspecto: Um desenvolvedor pode passar por uma proporção desejada, que será usada ao gerar SRCSets para redimensionar e cortar sua imagem conforme especificado. Para que o parâmetro ar entre em vigor, verifique se o parâmetro fit está definido para crop .
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
imgixParams = { { ar : "16:9" } }
/>
</ div > A proporção é especificada na width:height . Qualquer dimensão pode ser um número inteiro ou um flutuador. Todos os seguintes são válidos: 16: 9, 5: 1, 1,92: 1, 1: 1.67.
Se o fluido, a natureza dinâmica explicada acima não é desejada, a largura e a altura podem ser definidas explicitamente.
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 }
/> ; A renderização da imagem fixa anexará automaticamente um parâmetro q variável mapeado para cada parâmetro dpr ao gerar um SRCSET. Essa técnica é comumente usada para compensar o aumento do tamanho de arquivos de imagens de alto DPR. Como as imagens de alto-DPR são exibidas com uma densidade de pixels mais alta em dispositivos, a qualidade da imagem pode ser reduzida para reduzir o tamanho geral do arquivo sem sacrificar a qualidade visual percebida. Para obter mais informações e exemplos dessa técnica em ação, consulte esta postagem no blog. Esse comportamento respeitará qualquer valor q substituído por meio imgixParams e pode ser desativado completamente com a propriedade booleana disableQualityByDPR .
< Imgix
src = "https://domain.imgix.net/image.jpg"
width = { 100 }
disableQualityByDPR
/>irá gerar o seguinte 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 As imagens podem ser renderizadas como pano de fundo atrás das crianças usando <Background /> . O componente medirá o tamanho natural do contêiner, conforme determinado pelo CSS na página, e renderizará uma imagem ideal para essas dimensões.
Exemplo:
// 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 > Esse componente compartilha muitos adereços usados no componente principal, como imgixParams e htmlAttributes .
Como o componente deve medir o elemento no DOM, ele o montará primeiro e depois renderá novamente com uma imagem como imagem de fundo. Portanto, essa técnica não funciona muito bem com a renderização do servidor. Se você quiser que isso funcione bem com a renderização do servidor, você terá que definir uma largura e altura manualmente.
Defina a largura e a altura:
Definir a largura e/ou a altura explicitamente é recomendada se você já conhece isso de antemão. Isso salvará o componente de ter que fazer dois passes de renderização e renderizará uma imagem de fundo imediatamente.
Isso é realizado passando w e h como adereços para imgixparams.
< Background
src = "https://.../image.png"
imgixParams = { { w : 1920 , h : 500 } }
className = "blog-title"
>
< h2 > Blog Title </ h2 >
</ Background > Usando o elemento de imagem, você pode criar imagens responsivas:
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 >A fim de reduzir a duplicação em adereços, o JSX suporta spread de objetos para adereços:
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 >Um aviso é exibido quando nenhuma imagem de fallback é passada. Esse aviso pode ser desativado em circunstâncias especiais. Para desativar esse aviso, procure na seção AVISO.
O componente de ordem superior <ImgixProvider> (HOC), disponibiliza seus adereços para qualquer componente aninhado <Imgix> no seu aplicativo React.
Por exemplo, ao renderizar <ImgixProvider> no nível superior do seu aplicativo com imgixParams definido, todos os seus componentes <Imgix> terão acesso aos mesmos 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 o HTML gerado se pareça 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 > Você pode tirar proveito desse comportamento para usar URLs parciais com o componente <Imgix> . Ao definir o suporte domain no provedor, ele pode ser acessível a todos os componentes aninhados <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 os componentes <Imgix> acima acessarão o suporte de domain do provedor e terão seus caminhos src relativos resolvidos para o mesmo domínio. Para que o HTML gerado se pareça:
< 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 > Os adereços que <ImgixProvider> torna acessível também podem ser substituídos pelos componentes <Imgix> . Qualquer suporte definido no componente <Imgix> substituirá o valor definido pelo provedor.
// 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 o HTML gerado se pareça com isso
< 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 remover um suporte compartilhado de um componente <Imgix> , o mesmo suporte pode ser definido como undefined no próprio componente.
// 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 o HTML gerado se pareça com o seguinte:
< 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 > Você pode aninhar componentes ImgixProvider para garantir que diferentes consumidores tenham adereços diferentes.
Por exemplo, para fornecer aos componentes Imgix diferentes adereços dos componentes Picture , você pode aninhar um ImgixProvider dentro de outro.
O provedor aninhado alterará o contexto para o componente Picture , removendo essencialmente seu acesso aos adereços compartilhados fornecidos pelo ImgixProvider raiz.
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 >
)
} Embora o IMGIX esteja aberto a sugestões de recursos, podemos não aceitar o recurso se for um caso de uso muito específico. Os recursos abaixo são exemplos do que consideramos casos gerais de uso avançado. Nosso objetivo aqui é suportar 95% de todos os usos de elementos normais de img , picture e source .
Se o seu recurso desejado estiver fora dessa porcentagem, não se preocupe! Você provavelmente ainda poderá alcançar seu recurso com a API mais poderosa do React-Imgix: buildURL .
Esta biblioteca expõe uma função pura, buildURL , para gerar URLs IMGIX completos, com um URL base e alguns 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.xO URL base também pode conter parâmetros de consulta. Estes serão substituídos por quaisquer parâmetros passados com o segundo parâmetro.
Esse recurso pode ser usado para criar seus próprios elementos img personalizados ou para uso com outros componentes da imagem, como o componente de imagem do React-Bootstrap.
O parâmetro ixlib pode ser desativado por: buildURL(<url>, <params>, { disableLibraryParam: true })
Esta biblioteca permite que o desenvolvedor passe qualquer atributo que eles gostarem ao elemento DOM subjacente com htmlAttributes .
Por exemplo, se o desenvolvedor gostaria de anexar um retorno de chamada onLoad personalizado a um componente img :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> Se você quiser imagens de carga preguiçosa, recomendamos o uso de carregamento preguiçoso no nível do navegador, com a propriedade loading , passada em htmlAttributes :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/> Esta propriedade possui um forte suporte ao navegador e funções sem JavaScript adicional. Além disso, o uso de carregamento preguiçoso no nível do navegador permite a otimização do atributo de tamanhos com sizes="auto" , que permite ao navegador calcular automaticamente o tamanho ideal para a imagem com base em seu layout.
Se você precisar de controle granular sobre o comportamento de carregamento preguiçoso, como a distância de carregamento, poderá usar a API do observador de interseção.
Se você estiver usando uma biblioteca como o Lazysizes, poderá dizer ao componente imgix para gerar atributos compatíveis em vez do src , srcset e sizes padrão alterando algumas configurações:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> A mesma configuração está disponível para componentes <Source />
NB: Recomenda-se usar o plug-in de alteração de atributo para capturar alterações nos atributos de dados. Sem isso, alterar os adereços para esta biblioteca não terá efeito na imagem renderizada.
Se você quiser usar imagens LQIP, como antes, recomendamos o uso do Lazysizes. Para usar o React-Imgix com o Lazysizes, você pode simplesmente dizer para gerar atributos compatíveis com Lazysizes em vez do src , srcset padrão e sizes alterando algumas configurações e colocando a imagem de fallback SRC nos htmlattributes:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB: Se os adereços da imagem forem alterados após a primeira carga, a imagem de baixa qualidade substituirá a imagem de alta qualidade. Nesse caso, o atributo src pode ter que ser definido modificando diretamente o DOM, ou a API Lazysizes pode ter que ser chamada manualmente depois que os adereços forem alterados. De qualquer forma, esse comportamento não é suportado pelos mantenedores da biblioteca; portanto, use por seu próprio risco.
Um ref passou para react-imgix usando <Imgix ref={handleRef}> anexará o referência à instância <Imgix> , em vez do elemento DOM. É possível anexar um REF ao elemento DOM que é renderizado usando htmlAttributes :
< Imgix htmlAttributes = { { ref : handleRef } } >Isso também funciona para elementos de origem e imagem.
Esses adereços são compartilhados entre os componentes imgix e de origem
Geralmente na forma: https://[your_domain].imgix.net/[image] . Não inclua parâmetros.
Necessário somente ao usar caminhos parciais como suporte src para um componente. Ou seja, se src for "/images/myImage.jpg" , o suporte domain precisará ser definido.
Por exemplo :
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > Params imgix a serem adicionados à imagem src .
Por exemplo :
< Imgix imgixParams = { { mask : "ellipse" } } /> Especificou o tamanho esperado do desenvolvedor do elemento de imagem quando renderizado na página. Semelhante à largura. Por exemplo, 100vw , calc(50vw - 50px) , 500px . Altamente recomendado quando não está passando width ou height . O artigo "SRCSET e tamanhos" de Eric Portis aproveita como usar o atributo sizes .
className aplicado ao componente de nível superior. Para definir className na própria imagem, consulte htmlAttributes .
Forçar imagens a ter uma certa altura.
Forçar imagens a serem uma certa largura.
Desative a geração de conjuntos de src de largura variável para permitir a capacidade de resposta.
Por padrão, este componente adiciona um parâmetro ao URL gerado para ajudar o IMGIX com análises e suporte a esta biblioteca. Isso pode ser desativado definindo este suporte como true .
Por padrão, este componente codifica o caminho da URL no SRC e SRCSET. Isso pode ser desativado definindo este suporte como true . Para obter mais informações sobre como funciona a codificação do IMGIX Path, consulte os documentos imgix/js-core.
Quaisquer outros atributos a serem adicionados ao nó HTML (Exemplo: alt , data-* , className ).
Chamou o componentDidMount com o nó DOM montado como argumento.
Permite que os atributos SRC, SRCSET e tamanhos sejam remapeados a diferentes atributos HTML. Por exemplo:
attributeConfig = { {
src : 'data-src' ,
srcSet : 'data-srcset' ,
sizes : 'data-sizes'
} } Isso re-mapeia o SRC para data-src , SRCSET para data-srcset , etc.
Desative a geração de parâmetros q variáveis ao renderizar uma imagem de tamanho fixo.
Permite personalizar o comportamento da geração SRCSET. Opções válidas são widths , widthTolerance , minWidth , maxWidth e devicePixelRatios . Veja @imgix/js-core para documentação dessas opções.
className aplicado ao componente de nível superior. Para definir className na própria imagem, consulte htmlAttributes .
Chamou o componentDidMount com o nó DOM montado como argumento.
Quaisquer outros atributos a serem adicionados ao nó HTML (Exemplo: alt , data-* , className ).
Geralmente na forma: https://[your_domain].imgix.net/[image] . Não inclua parâmetros.
Params imgix a serem adicionados à imagem src . É também assim que a largura e a altura podem ser explicitamente definidas. Para obter mais informações sobre isso, consulte a seção "Antecedentes" acima.
Por exemplo :
< Background imgixParams = { { mask : "ellipse" } } /> className aplicado ao componente de nível superior. Para definir className na própria imagem, consulte htmlAttributes .
Por padrão, este componente adiciona um parâmetro ao URL gerado para ajudar o IMGIX com análises e suporte a esta biblioteca. Isso pode ser desativado definindo este suporte como true .
Quaisquer outros atributos a serem adicionados ao nó HTML (Exemplo: alt , data-* , className ).
Esta biblioteca desencadeia alguns avisos sob certas situações para tentar ajudar os desenvolvedores na atualização ou a falha. Às vezes, isso pode estar incorreto devido à dificuldade em detectar situações de erro. Isso é irritante e, portanto, há uma maneira de desligá -los. Isso não é recomendado para iniciantes, mas se você estiver usando componentes personalizados ou outros recursos avançados, é provável que você precise desativá -los.
Os avisos podem ser desligados com a API de configuração pública, PublicConfigAPI , que é exportado no nível superior.
// in init script/application startup
import { PublicConfigAPI } from "react-imgix" ;
PublicConfigAPI . disableWarning ( '<warningName>' ) ;
//... rest of app startup
React . render ( ... ) ; Os avisos também podem ser ativados com PublicConfigAPI.enableWarning('<warningName>')
Os avisos disponíveis são:
warningName | Descrição |
|---|---|
| Fallbackimage | Acionado quando não há <img> ou <Imgix> no final das crianças ao usar <Picture> . Uma imagem de fallback é crucial para garantir que a imagem renderize corretamente quando o navegador não pode corresponder às fontes fornecidas |
| tamanhosttribute | Esta biblioteca exige que um suporte sizes seja transmitido para que as imagens possam renderizar responsivamente. Isso só deve desligar em circunstâncias muito especiais. |
| InvalidArformat | Avisos lançados quando o parâmetro ar IMGIX não é passado no formato correto ( w:h ) |
| Excesso de dimensionamento | Um erro de tempo de execução acionado quando uma imagem carrega com um tamanho intrínseco substancialmente maior que o tamanho renderizado. |
| lazylcp | Um erro de tempo de execução acionado quando uma imagem é detectada para ser o elemento LCP, mas é carregada com loading="lazy" . |
Esta versão traz a API React-Imgix mais alinhada com a do Serviço de Renderização da IMGIX.
A maior mudança que os usuários perceberão é que o componente deste projeto não gerará mais um parâmetro padrão fit=crop . A intenção original por trás disso era que as imagens geradas manteriam a proporção quando pelo menos uma das dimensões fosse especificada. No entanto, os conjuntos de comportamentos da API IMGIX padrão fit=clip , que agora se refletem neste projeto. Embora isso possa não causar mudanças de quebra para todos os usuários, isso pode resultar em comportamento incomum de imagem renderizado em alguns casos. Como tal, preferimos errar pelo lado da cautela e fornecer aos usuários a capacidade de optar por essas alterações por meio de uma grande versão.
Se você estiver dependendo da geração padrão de fit=crop ao renderizar imagens, agora você precisará especificá -la manualmente ao invocar o componente:
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
imgixParams = { { fit : "crop" } }
/> A outra grande mudança refere -se à maneira como o componente determina a proporção de uma imagem. Em vez de anexar uma altura calculada h= valor com base nas dimensões especificadas, a sequência URL agora será criada usando o parâmetro de proporção do IMGIX ar= . Felizmente, a interface para especificar uma proporção não é diferente de antes. No entanto, os usuários terão que passar no parâmetro fit=crop para que ele entre em vigor:
< Imgix
src = "http://assets.imgix.net/examples/pione.jpg"
width = { 400 }
imgixParams = { { ar : "2:1" , fit : "crop" } }
/>Esta é uma atualização muito grande para esta biblioteca com muitas mudanças de quebra. Pedimos desculpas por qualquer problema que isso possa causar e tentamos reduzir o número de mudanças de quebra. Também trabalhamos para levar todas essas mudanças em uma liberação para reduzir seus impactos. Não planejamos fazer mudanças de ruptura por um tempo depois disso e ficaremos focadas na adição de recursos.
A maior mudança nessa versão principal é a mudança para srcSet e sizes baseados em largura para a capacidade de resposta. Isso tem uma série de benefícios, incluindo melhor renderização do servidor, melhor capacidade de resposta, menos potencial para bugs e melhorias de desempenho. Isso significa que o comportamento antigo do tamanho da montagem foi removido. Se isso for necessário, um exemplo de como isso pode ser alcançado pode ser encontrado aqui
Para atualizar para a versão 8, as seguintes alterações devem ser feitas.
Um suporte sizes deve ser adicionado a todos os usos de <Imgix> . Se sizes for novo para você (ou mesmo se não for), o artigo seminal de Eric sobre srcset e sizes é altamente recomendado.
Altere todos os usos do type='picture' para <Picture> e type='source' para <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 >Veja o suporte da imagem para obter mais informações.
Remova todo o uso do type='bg' , pois não é mais suportado. Foi decidido que era muito difícil implementar esse recurso de forma consistente. Se você ainda quiser usar esse recurso, dê a este problema um polegar para cima: #160 Se recebermos solicitações suficientes para isso, iremos implementar novamente.
Remova os adereços aggressiveLoad , component , fluid , precision , pois não são mais usados.
Altere todos os usos de defaultHeight e defaultWidth para os adereços width e height .
Renomear generateSrcSet para disableSrcSet e inverter o valor transmitido como o valor do suporte. ie generateSrcSet={false} se torna disableSrcSet={true} ou simplesmente disableSrcSet
Se for necessário suporte para um navegador que não suporta o novo uso do SRCSET (como o IE 11), recomendamos a adição de um poli -preenchimento, como o Great Picturefill.
srcset , sizes ou picture voltarão graciosamente ao img src padrão, quando apropriado. Se você deseja fornecer uma experiência totalmente responsiva para esses navegadores, o React-Imgix funciona muito bem ao lado do PictureFill!Esse suporte ao navegador é possível pelo grande apoio do Browserstack.
Obrigado a essas pessoas maravilhosas (key emoji):
Frederick Fogerty ? | Sherwinski ? | Jason Eberle ? | Paul Straw ? | Kelly Sutton ? | Richard Bliss | Eric Koslow |
Baldur Helgason | Jonathan Schatz | Theo | Tanner Stirrat ? | 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. |
Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas, mas revise as diretrizes de contribuição antes de começar!
O React-Imgix foi criado originalmente por Frederick Fogerty. Está licenciado sob a licença ISC (consulte o arquivo de licença para obter mais informações).
