react imgix
v9.10.0
react-imgix предоставляет пользовательские компоненты для интеграции Imgix в сайты React и генерацию сервера изображений.
Прежде чем начать работу с React-Imgix , настоятельно рекомендуется прочитать основополагающую статью Эрика Портиса о srcset и sizes . В этой статье объясняется история адаптивных изображений в адаптивном дизайне, почему они необходимы и как все эти технологии работают вместе, чтобы сохранить пропускную способность и обеспечить лучший опыт для пользователей. Основная цель React-Imgix-упростить реализацию этих инструментов для разработчиков, поэтому понимание того, как они работают, значительно улучшит ваш опыт React-Imgix.
Ниже приведены некоторые другие статьи, которые помогают объяснить адаптивные образы, и как это может работать вместе с Imgix:
<picture> . Обсуждает различия между художественным направлением и переключением разрешения и приведет примеры того, как выполнить художественное направление с помощью IMGIX.srcset и IMGIX. Посмотрите, как Imgix может работать с srcset и sizes , чтобы служить правильному изображению. npm install react-imgixyarn add react-imgixЭтот модуль экспортирует две транспилированные версии. Если для употребления этого модуля используется бочонки с модулем ES6, он поднимет версию модуля ES6 и сможет выполнить дерево. Если вы не используете модули ES6, вам ничего не нужно делать
import Imgix from "react-imgix" ;
// in react component
< Imgix src = { string } /> ; Для простого использования, поскольку вы использовали бы <img> , React-Imgix можно использовать следующим образом:
import Imgix from "react-imgix" ;
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" sizes = "100vw" /> ; Обратите внимание: 100vw является подходящим значением sizes для полноценного изображения. Если ваше изображение не полное, вы должны использовать другое значение для sizes . Статья Эрика Портиса «SRCSET and Size» подробно учитывается тому, как использовать атрибут sizes .
Это будет генерировать HTML, похожий на следующее:
< img
src =" https://assets.imgix.net/examples/pione.jpg?auto=format&crop=faces&ixlib=react-7.2.0 "
sizes =" 100vw "
srcset ="
https://assets.imgix.net/examples/pione.jpg?auto=format&crop=faces&ixlib=react-7.2.0&w=100 100w,
https://assets.imgix.net/examples/pione.jpg?auto=format&crop=faces&ixlib=react-7.2.0&w=200 200w,
...
"
/>Поскольку IMGIX может генерировать столько производных разрешений по мере необходимости, React-Imgix вычисляет их программно, используя указанные вами измерения. Вся эта информация была помещена в атрибуты SRCSET и размеры.
Ширина и высота известны и фиксированные: если ширина и высота известны заранее, и изображение фиксированного размера требуется, рекомендуется, чтобы они были установлены явно:
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
width = { 100 } // This sets what resolution the component should load from the CDN and the size of the resulting image
height = { 200 }
/> ; Когда указаны ширина и высота, <Imgix> даст изображение SRCSET с дескрипторами разрешения.
Ширина и высота известны, но жидко: если внутренняя ширина и высота изображения известны, но изображение размера жидкости требуется, необходимо, чтобы ширина и высота все равно должны быть установлены, чтобы избежать сдвига макета, но они должны быть установлены с помощью htmlAttributes , чтобы не намекнуть <Imgix> для создания описателей разрешения в 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 ,
} }
/> ; В этом примере <Imgix> будет создавать SRCSET с дескрипторами ширины.
Примечание Эта библиотека не работает в компонентах сервера, а добавляет директиву «Использовать клиент» в компоненты. Это означает, что они могут использоваться вместе с компонентами сервера (например, в качестве детей), но они по-прежнему требуют JavaScript на стороне клиента. Клиентские компоненты все еще SSRED.
React-Imgix также хорошо работает на сервере. Поскольку React-Imgix использует srcset и sizes , он позволяет браузеру отображать изображение правильного размера сразу после загрузки страницы. Если они известны, пройти ширину и атрибуты высоты через htmlAttributes , чтобы помочь борьбу с сдвигом макета.
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
htmlAttributes = { {
width : 400 ,
height : 250 ,
} }
/> ; Если ширина и высота известны заранее, и изображение фиксированного размера требуется, установите ширину и высоту и не устанавливайте sizes :
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
width = { 100 } // This sets what resolution the component should load from the CDN and the size of the resulting image
height = { 200 }
/> ; Этот компонент действует динамически по умолчанию. Компонент будет использовать srcset и sizes , чтобы отобразить изображение правильного размера для своего контейнера. Это пример этого отзывчивого поведения.
sizes должны быть правильно установлены для того, чтобы это работало хорошо, и некоторый стиль должен использоваться для установки размера отображаемого компонента. Без sizes и правильного стиля изображение может отображаться в полноразмерном.
./styles.css
. App {
display : flex;
}
. App > img {
margin : 10 px auto;
width : 10 vw ;
height : 200 px ;
} ./app.js
import "./styles.css" ;
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
/>
</ div > ; Соотношение сторон: разработчик может передать желаемое соотношение сторон, которое будет использоваться при генерации SRCSET для изменения размера и обрезки вашего изображения в соответствии с указанными. Чтобы параметр ar вступил в силу, убедитесь, что параметр fit установлен на crop .
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
imgixParams = { { ar : "16:9" } }
/>
</ div > Соотношение сторон указано в width:height . Любое измерение может быть целым числом или поплавком. Все следующие действительны: 16: 9, 5: 1, 1,92: 1, 1: 1,67.
Если жидкость, динамическая природа, объясненная выше, не требуется, ширина и высота могут быть установлены явно.
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
width = { 100 } // This sets what resolution the component should load from the CDN and the size of the resulting image
height = { 200 }
/> ; Фиксированное рендеринг изображения автоматически добавляет параметр q переменной, отображаемый в каждый параметр dpr при генерации SRCSET. Этот метод обычно используется для компенсации увеличенного размера файлов изображений с высоким содержанием DPR. Поскольку изображения с высоким содержанием DPR отображаются при более высокой плотности пикселей на устройствах, качество изображения может быть снижено, чтобы уменьшить общий размер файлов без жертвы воспринимаемого визуального качества. Для получения дополнительной информации и примеров этой техники в действии см. В этом блоге. Такое поведение будет уважать любое переходящее значение q , проходящее через imgixParams и может быть отключено вообще с логическим свойством disableQualityByDPR .
< Imgix
src = "https://domain.imgix.net/image.jpg"
width = { 100 }
disableQualityByDPR
/>будет генерировать следующий srcset:
https://domain.imgix.net/image.jpg?q=75&w=100&dpr=1 1x,
https://domain.imgix.net/image.jpg?q=50&w=100&dpr=2 2x,
https://domain.imgix.net/image.jpg?q=35&w=100&dpr=3 3x,
https://domain.imgix.net/image.jpg?q=23&w=100&dpr=4 4x,
https://domain.imgix.net/image.jpg?q=20&w=100&dpr=5 5x Изображения могут быть представлены в качестве фона детей с использованием <Background /> . Компонент измеряет естественный размер контейнера, определяемый CSS на странице, и будет отображать оптимальное изображение для этих измерений.
Пример:
// In CSS
. blog - title {
width : 100 vw ;
height : calc ( 100 vw - 100 px ) ;
}
// In Component (React)
import { Background } from 'react-imgix'
< Background src = "https://.../image.png" className = "blog-title" >
< h2 > Blog Title </ h2 >
</ Background > Этот компонент разделяет много реквизитов, которые используются в основном компоненте, таких как imgixParams и htmlAttributes .
Поскольку компонент должен измерить элемент в DOM, он сначала установит его, а затем повторно рендеринг с изображением в качестве фонового изображения. Таким образом, этот метод не очень хорошо работает с рендерингом сервера. Если вы хотите, чтобы это хорошо поработало с рендерингом сервера, вам придется установить ширину и высоту вручную.
Установить ширину и высота:
Установка ширины и/или высоты явно рекомендуется, если вы уже знаете их заранее. Это сохранит компонент от необходимости выполнять два прохода рендеринга, и он немедленно сделает фоновое изображение.
Это достигается путем передачи w и h в качестве реквизита ImgixParams.
< Background
src = "https://.../image.png"
imgixParams = { { w : 1920 , h : 500 } }
className = "blog-title"
>
< h2 > Blog Title </ h2 >
</ Background > Используя элемент изображения, вы можете создать адаптивные изображения:
import Imgix , { Picture , Source } from "react-imgix" ;
< Picture >
< Source
src = { src }
width = { 400 }
htmlAttributes = { { media : "(min-width: 768px)" } }
/>
< Source
src = { src }
width = { 200 }
htmlAttributes = { { media : "(min-width: 320px)" } }
/>
< Imgix src = { src } imgixParams = { { w : 100 } } />
</ Picture >Чтобы уменьшить дублирование в реквизите, JSX поддерживает распространение объекта для реквизита:
import Imgix , { Picture , Source } from "react-imgix" ;
const commonProps = {
src : "https://..." ,
imgixParams : {
fit : "crop" ,
crop : "faces" ,
} ,
} ;
< Picture >
< Source
{ ... commonProps }
width = { 400 }
htmlAttributes = { { media : "(min-width: 768px)" } }
/>
< Source
{ ... commonProps }
width = { 200 }
htmlAttributes = { { media : "(min-width: 320px)" } }
/>
< Imgix src = { src } width = { 100 } />
</ Picture >ПРЕДУПРЕЖДЕНИЕ отображается, когда не проходит резервное изображение. Это предупреждение может быть отключено в особых обстоятельствах. Чтобы отключить это предупреждение, посмотрите в разделе предупреждений.
Компонент <ImgixProvider> более высокого порядка (HOC) предоставляет свой реквизит доступным для любого вложенного <Imgix> компонента в вашем приложении React.
Например, от рендеринга <ImgixProvider> на верхнем уровне вашего приложения с определенными imgixParams , все ваши компоненты <Imgix> будут иметь доступ к тем же imgixParams .
import React from "react" ;
import Imgix , { ImgixProvider } from "react-imgix" ;
import HomePage from "./components/HomePage" ;
function App ( ) {
return (
< div className = "App" >
< header className = "App-header" >
< ImgixProvider imgixParams = { { ar : "16:9" , fit : "crop" } } >
< div className = "intro-blurb" > { /* ... */ } </ div >
< div className = "gallery" >
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" />
< Imgix src = "https://sdk-test.imgix.net/ساندویچ.jpg" />
</ div >
</ ImgixProvider >
</ header >
</ div >
) ;
}
export default App ;Так что сгенерированный HTML выглядит как
< div class =" gallery " >
< img
src =" https://assets.imgix.net/examples/pione.jpg?auto=format&ar=16%3A9&fit=crop "
...
/>
< img
src =" https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg?auto=format&ar=16%3A9&fit=crop "
...
/>
</ div > Вы можете воспользоваться этим поведением, чтобы использовать частичные URL -адреса с компонентом <Imgix> . Определяя domain опору на поставщика, она может быть доступна доступной для всех вложенных компонентов <Imgix> .
// inside App.jsx
{
/*... */
}
< ImgixProvider domain = "assets.imgix.net" >
< div className = "intro-blurb" > { /* ... */ } s </ div >
< div className = "gallery" >
< Imgix src = "/examples/pione.jpg" />
< Imgix src = "Office Background 1.png" />
</ div >
</ ImgixProvider > ;
{
/*... */
} Оба компонента <Imgix> выше будут доступны к domain опоре от поставщика и будут иметь свои относительные пути src до одного домена. Так что сгенерированный HTML выглядит как -то вроде:
< div class =" gallery " >
< img src =" https://assets.imgix.net/examples/pione.jpg " ... />
< img
src =" https://assets.imgix.net/Office%20Background%201.png?auto=format "
...
/>
</ div > Реквизит, который <ImgixProvider> делает доступным, также может быть переоборудовано компонентами <Imgix> . Любая опора, определенная на компоненте <Imgix> , будет переопределять значение, установленное поставщиком.
// inside App.jsx
{
/*... */
}
< ImgixProvider imgixParams = { { ar : "16:9" , fit : "crop" } } >
< div className = "intro-blurb" > { /* ... */ } s </ div >
< div className = "gallery" >
< Imgix
imgixParams = { { ar : "4:2" } }
src = "https://assets.imgix.net/examples/pione.jpg"
/>
< Imgix src = "https://sdk-test.imgix.net/ساندویچ.jpg" />
</ div >
</ ImgixProvider > ;
{
/*... */
}Так что сгенерированный HTML выглядит примерно так
< div class =" gallery " >
< img
src =" https://assets.imgix.net/examples/pione.jpg?auto=format&ar=4%3A2&fit=crop "
...
/>
< img
src =" https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg?ar=16%3A9&fit=crop "
...
/>
</ div > Чтобы удалить общую опору из компонента <Imgix> , та же самая опора может быть undefined на самой компонент.
// inside App.jsx
{
/*... */
}
< ImgixProvider height = { 500 } >
< div className = "intro-blurb" > { /* ... */ } s </ div >
< div className = "gallery" >
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" />
< Imgix height = { undefined } src = "https://sdk-test.imgix.net/ساندویچ.jpg" />
</ div >
</ ImgixProvider > ;
{
/*... */
}Так что сгенерированный HTML выглядит примерно так:
< div class =" gallery " >
< img src =" https://assets.imgix.net/examples/pione.jpg?h=500 " ... />
< img
src =" https://sdk-test.imgix.net/%D8%B3%D8%A7%D9%86%D8%AF%D9%88%DB%8C%DA%86.jpg "
...
/>
</ div > Вы можете гнездовать компоненты ImgixProvider , чтобы убедиться, что у разных потребителей есть разные реквизиты.
Например, чтобы дать Imgix компоненты различные реквизиты из компонентов Picture , вы можете гнездовать ImgixProvider внутри другого.
Вложенный поставщик изменит контекст для компонента Picture , по сути, удаляя их доступ к общим реквизитам, предоставленным корневым ImgixProvider .
import React from 'react'
import Imgix , { ImgixProvider , Picture , Source } from "react-imgix" ;
export default function simpleImage ( ) {
return (
< div className = "imgix-simple-api-example" >
{ /* there props will be accessible to all the imgix components */ }
< ImgixProvider
domain = "assets.imgix.net"
src = "/examples/pione.jpg"
imgixParams = { { fit : "crop" } }
>
< Imgix width = { 200 } height = { 500 } src = "/examples/pione.jpg" />
< Imgix domain = "sdk-test.imgix.net" src = "/ساندویچ.jpg" />
< ImgixProvider
{ /* since we define a new provider here, the context is redefined for any child components */ }
>
< Picture >
{ /* imgixParams prop is no longer defined here */ }
< Source
width = { 100 }
htmlAttributes = { { media : "(min-width: 768px)" } }
/>
< Source
width = { 200 }
htmlAttributes = { { media : "(min-width: 800px)" } }
/>
< Imgix src = "/examples/pione.jpg" />
</ Picture >
</ ImgixProvider >
</ ImgixProvider >
</ div >
)
} Хотя Imgix открыт для предложений функций, мы не можем принять эту функцию, если это очень специфический вариант использования. Приведенные ниже функции являются примерами того, что мы считаем общими усовершенствованными вариантами использования. Наша цель здесь состоит в том, чтобы поддержать 95% всех использования обычных элементов img , picture и source .
Если ваша желаемая функция выходит за пределы этого процента, не беспокойтесь! Вы, вероятно, все еще сможете достичь своей функции с более мощным API React-Imgix: buildURL .
Эта библиотека раскрывает чистую функцию, buildURL , для создания полных URL -адресов IMGIX, полученных базовым URL и некоторых параметров.
import { buildURL } from "react-imgix" ;
buildURL ( "http://yourdomain.imgix.net/image.png" , { w : 450 , h : 100 } ) ; // => http://yourdomain.imgix.net/image.png?auto=format&w=450&h=100&ixlib=react-x.x.xБазовый URL также может содержать параметры запроса. Они будут переопределены любыми параметрами, передаваемыми вторым параметром.
Эта функция может использоваться для создания собственных элементов img или для использования с другими компонентами изображения, такими как компонент изображения React-Bootstrap.
Параметр ixlib может быть отключен: buildURL(<url>, <params>, { disableLibraryParam: true })
Эта библиотека позволяет разработчику передать любой атрибут, который им нравится, в базовый элемент DOM с htmlAttributes .
Например, если разработчик хотел бы прикрепить пользовательский onLoad вызов к компоненту img :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> Если вы хотите получить Lazy Load Images, мы рекомендуем использовать ленивую загрузку на уровне браузера с свойством loading , передаваемые в htmlAttributes :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/> Это свойство имеет сильную поддержку браузера и функции без дополнительного JavaScript. Кроме того, использование ленивой загрузки на уровне браузера позволяет оптимизировать атрибут размеров с sizes="auto" , что позволяет браузеру автоматически рассчитывать оптимальный размер для изображения на основе его макета.
Если вам нужен гранулированный контроль над поведением ленивого нагрузки, таком как расстояние нагрузки, вы можете использовать API API Observer Insection.
Если вы используете такую библиотеку, как Lazysisizes, вы можете сказать компоненту IMGIX генерировать совместимые атрибуты вместо стандартных src , srcset и sizes изменяя некоторые настройки конфигурации:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> Та же самая конфигурация доступна для <Source /> components
NB: Рекомендуется использовать плагин изменения атрибута, чтобы захватить изменения в атрибутах Data-*. Без этого изменение реквизита на эту библиотеку не повлияет на отображаемое изображение.
Если вы хотите использовать изображения LQIP, как и раньше, мы рекомендуем использовать LazySisizes. Чтобы использовать React-Imgix с Lazysisizes, вы можете просто сказать ему генерировать атрибуты, совместимые с лазизами, вместо стандартных src , srcset и sizes изменяя некоторые настройки конфигурации и размещение SRC HTMLattributes: SRC SR
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB: Если реквизиты изображения изменяются после первой нагрузки, изображение низкого качества заменит высококачественное изображение. В этом случае атрибут src , возможно, должен быть установлен путем непосредственного изменения DOM, или Lazysises API, возможно, придется называться вручную после изменения реквизита. В любом случае, это поведение не поддерживается со стороны библиотеки, поэтому используйте свой собственный риск.
ref , передаваемое для реагирования-imgix с использованием <Imgix ref={handleRef}> прикрепит рефери к экземпляру <Imgix> , а не к элементу DOM. Можно прикрепить рефери к элементу DOM, который отображается с использованием htmlAttributes :
< Imgix htmlAttributes = { { ref : handleRef } } >Это работает и для элементов источника и изображения.
Эти реквизиты разделены между Imgix и исходными компонентами
Обычно в форме: https://[your_domain].imgix.net/[image] . Не включайте никаких параметров.
Требуется только при использовании частичных путей в качестве src Prop для компонента. То есть, если src является "/images/myImage.jpg" , то необходимо определить опору domain .
Например :
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > Imgix params, чтобы добавить к изображению src .
Например :
< Imgix imgixParams = { { mask : "ellipse" } } /> Указал ожидаемый размер разработчика элемента изображения при отображении на странице. Похоже на ширину. Например, 100vw , calc(50vw - 50px) , 500px . Настоятельно рекомендуется, когда не проходит width или height . Статья Эрика Портиса «SRCSET and Size» подробно учитывается тому, как использовать атрибут sizes .
className применяется к компоненту верхнего уровня. Чтобы установить className на самом изображении, см. htmlAttributes .
Принудительные изображения быть определенной высотой.
Принудительно изображения быть определенной шириной.
Отключить генерацию наборов SRC ширины переменной, чтобы обеспечить отзывчивость.
По умолчанию этот компонент добавляет параметр к сгенерированному URL, чтобы помочь Imgix с аналитикой и поддержкой этой библиотеки. Это может быть отключено, установив эту опору на true .
По умолчанию этот компонент кодирует путь URL в SRC и SRCSE. Это может быть отключено, установив эту опору на true . Для получения дополнительной информации о том, как работает кодирование Path Imgix, пожалуйста, обратитесь к документам Imgix/JS-Core.
Любые другие атрибуты для добавления к узлу HTML (пример: alt , data-* , className ).
Вызван на componentDidMount с установленным узлом DOM в качестве аргумента.
Позволяет, чтобы атрибуты SRC, SRCSET и размеры были переназначены в различные атрибуты HTML. Например:
attributeConfig = { {
src : 'data-src' ,
srcSet : 'data-srcset' ,
sizes : 'data-sizes'
} } Это повторно отображает SRC в data-src , SRCSET to data-srcset и т. Д.
Отключить генерацию параметров переменной q при рендеринге изображения фиксированного размера.
Позволяет настроить поведение генерации SRCSET. Допустимыми опциями являются widths , widthTolerance , minWidth , maxWidth и devicePixelRatios . См. @Imgix/JS-Core для документации этих вариантов.
className применяется к компоненту верхнего уровня. Чтобы установить className на самом изображении, см. htmlAttributes .
Вызван на componentDidMount с установленным узлом DOM в качестве аргумента.
Любые другие атрибуты для добавления к узлу HTML (пример: alt , data-* , className ).
Обычно в форме: https://[your_domain].imgix.net/[image] . Не включайте никаких параметров.
Imgix params, чтобы добавить к изображению src . Так также может быть явно установлена ширина и высота. Для получения дополнительной информации об этом см. В разделе «Фон» выше.
Например :
< Background imgixParams = { { mask : "ellipse" } } /> className применяется к компоненту верхнего уровня. Чтобы установить className на самом изображении, см. htmlAttributes .
По умолчанию этот компонент добавляет параметр к сгенерированному URL, чтобы помочь Imgix с аналитикой и поддержкой этой библиотеки. Это может быть отключено, установив эту опору на true .
Любые другие атрибуты для добавления к узлу HTML (пример: alt , data-* , className ).
Эта библиотека запускает некоторые предупреждения в определенных ситуациях, чтобы попробовать разработчиков помощи в обновлении или неудачной. Иногда они могут быть неверными из -за сложности обнаружения ситуаций ошибок. Это раздражает, и поэтому есть способ отключить их. Это не рекомендуется для начинающих, но если вы используете пользовательские компоненты или другие расширенные функции, вероятно, вам придется отключить их.
Предупреждения можно отключить с помощью публичного конфигурационного API, PublicConfigAPI , который экспортируется на верхнем уровне.
// in init script/application startup
import { PublicConfigAPI } from "react-imgix" ;
PublicConfigAPI . disableWarning ( '<warningName>' ) ;
//... rest of app startup
React . render ( ... ) ; Предупреждения также могут быть включены с PublicConfigAPI.enableWarning('<warningName>')
Предупреждения доступны:
warningName | Описание |
|---|---|
| SwarkbackImage | Запускается, когда нет <img> или <Imgix> в конце детей при использовании <Picture> . Огновленное изображение имеет решающее значение, чтобы убедиться, что изображение правильно отображается, когда браузер не может совпадать с предоставленными источниками |
| SIZESATTRIBUTE | Эта библиотека требует прохождения sizes , чтобы изображения могли отдать ответственность. Это должно отключаться только в особых обстоятельствах. |
| Invalidarformat | Предупреждения, брошенные, когда параметр ar IMGIX не передается в правильном формате ( w:h ) |
| OversizeImage | Ошибка времени выполнения, запускаемой, когда изображение загружается с внутренним размером, значительно больше, чем рендерированный размер. |
| lazylcp | Ошибка времени выполнения, запускаемой, когда изображение обнаружено как элемент LCP, но загружается loading="lazy" . |
Этот релиз привносит API React-Imgix больше в соответствии с службой рендеринга Imgix.
Наибольшее изменение, которое пользователи заметят, состоит в том, что компонент этого проекта больше не будет генерировать параметр fit=crop =. Первоначальное намерение, стоящее за этим, заключалось в том, что сгенерированные изображения будут поддерживать соотношение сторон, когда был указан хотя бы один из измерений. Тем не менее, наборы поведения API IMGIX по умолчанию fit=clip , который теперь отражается в этом проекте. Хотя это может не вызвать нарушения изменений для всех пользователей, в некоторых случаях это может привести к необычному поведению изображения. Таким образом, мы бы предпочли ошибиться в осторожности и предоставить пользователям возможность выбрать эти изменения с помощью крупного выпуска.
Если вы в настоящее время полагаетесь на генерацию fit=crop при рендеринге изображений, теперь вам придется вручную указать его при вызове компонента:
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
imgixParams = { { fit : "crop" } }
/> Другое основное изменение относится к тому, как компонент определяет соотношение сторон изображения. Вместо того, чтобы добавлять рассчитанную высоту h= значение на основе указанных измерений, строка URL теперь будет построена с использованием параметра соотношения аспекта IMGIX ar= . К счастью, интерфейс для определения соотношения сторон не отличается от ранее. Тем не менее, пользователи должны будут пройти в параметр fit=crop , чтобы он вступил в силу:
< Imgix
src = "http://assets.imgix.net/examples/pione.jpg"
width = { 400 }
imgixParams = { { ar : "2:1" , fit : "crop" } }
/>Это очень большое обновление этой библиотеки с большим количеством нарушений. Мы приносим извинения за любые проблемы, которые это может вызвать, и мы попытались уменьшить количество нарушающих изменений. Мы также работали над тем, чтобы превратить все эти изменения в один релиз, чтобы уменьшить его воздействие. После этого мы не планируем вносить нарушающие изменения, и будем сосредоточены на добавлении функций.
Наибольшее изменение в этой основной версии-переход к srcSet на основе ширины и sizes для отзывчивости. Это имеет множество преимуществ, в том числе лучшее рендеринг сервера, лучшую отзывчивость, меньший потенциал для ошибок и улучшение производительности. Это означает, что старое поведение размером с фитинга в контейнер было удалено. Если это необходимо, можно найти пример того, как это можно достичь
Чтобы обновить до версии 8, должны быть внесены следующие изменения.
Опоры sizes должны быть добавлены во все использование <Imgix> . Если sizes являются новыми для вас (или даже если это не так), настоятельно рекомендуется оригинальная статья Эрика о srcset и sizes .
Измените все использование type='picture' на <Picture> и type='source' на <Source>
// this...
< Imgix type = 'picture' >
< Imgix type = 'source' src = { src } >
< Imgix type = 'source' src = { src } >
</ Imgix >
// becomes...
< Picture >
< Source src = { src } >
< Source src = { src } >
</ Picture >Смотрите поддержку с изображением для получения дополнительной информации.
Удалите все использование type='bg' , так как он больше не поддерживается. Было решено, что было слишком сложно реализовать эту функцию последовательно. Если вы все еще хотите использовать эту функцию, пожалуйста, дайте эту проблему большие пальцы: #160, если мы получим достаточно запросов на это, мы переопределим его.
Удалите реквизит aggressiveLoad , component , fluid , precision , поскольку они больше не используются.
Измените все использование defaultHeight и defaultWidth протечки на width и реквизиты height .
RENAME generateSrcSet для disableSrcSet и инвертировать значение, передаваемое как значение опоры. IE generateSrcSet={false} становится disableSrcSet={true} или просто disableSrcSet
Если для браузера необходима поддержка, который не поддерживает новое использование SRCSET (например, IE 11), мы рекомендовали добавить полифилл, например, отличный Picturefill.
srcset , sizes или picture , изящно вернутся к img src по умолчанию, когда это необходимо. Если вы хотите предоставить полностью реагирующий опыт для этих браузеров, React-Imgix отлично работает вместе с Picturefill!Эта поддержка браузера стала возможной благодаря большой поддержке Browserstack.
Спасибо этим замечательным людям (ключ эмодзи):
Фредерик Фогерти ? | Шервинский ? | Джейсон Эберл ? | Пол Строп ? | Келли Саттон ? | Ричард Блисс | Эрик Кослоу |
Балдур Хельгасон | Джонатан Шац | Тео | Таннер Стирерат ? | Николас Суски | голос | Крейг Кочис |
Деннис Шааф | Энди Кент | Габби Лош | Стивен Кук ? | Юджин Нагорни | Сэмюэль Джайлс | Espen Hovlandsdal |
Даниэль Фаррелл | Луис Фернандо да Силва Сислак | Ник Готтлиб | Пьер Гримо | Луис Х. Болл -младший |
Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются, но, пожалуйста, просмотрите рекомендации взносов, прежде чем начать работу!
React-Imgix был первоначально создан Фредериком Фогерти. Он лицензирован по лицензии ISC (см. Файл лицензии для получения дополнительной информации).
