react imgix
v9.10.0
react-imgix imgix를 React 사이트에 통합하고 이미지 서버 측을 생성하기위한 사용자 정의 구성 요소를 제공합니다.
React-Imgix를 시작하기 전에 srcset 및 sizes 에 대한 Eric Portis의 주요 기사를 읽는 것이 좋습니다 . 이 기사는 반응 형 디자인의 반응 형 이미지의 역사, 필요한 이유 및 이러한 모든 기술이 어떻게 협력하여 대역폭을 절약하고 사용자에게 더 나은 경험을 제공하는 방법을 설명합니다. React-Imgix의 주요 목표는 이러한 도구가 개발자가 더 쉽게 구현할 수 있도록하는 것입니다. 따라서 작동 방식을 이해하면 React-Imgix 경험을 크게 향상시킬 수 있습니다.
다음은 반응 형 이미지를 설명하는 데 도움이되는 다른 기사와 Imgix와 함께 작동하는 방법입니다.
<picture> 와 함께 imgix 사용. 예술 방향과 해상도 전환의 차이점을 논의하고 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 에 대해 다른 값을 사용해야합니다. Eric Portis의 "SRCSET 및 크기"기사는 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> 설정되어야합니다.
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 }
/> ; 고정 이미지 렌더링은 SRCSET을 생성 할 때 각 dpr 매개 변수에 매핑 된 가변 q 매개 변수를 자동으로 추가합니다. 이 기술은 일반적으로 높은 DPR 이미지의 파일 크기 증가를 보상하는 데 사용됩니다. 높은 DPR 이미지는 장치에서 더 높은 픽셀 밀도로 표시되므로 인식 된 시각적 품질을 희생하지 않고 전체 파일 크기를 줄이기 위해 이미지 품질을 낮출 수 있습니다. 이 기술에 대한 자세한 내용과 예는이 블로그 게시물을 참조하십시오. 이 동작은 imgixParams 통해 전달 된 우선 q 값을 존중하며 부울 속성 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 >Props의 중복을 줄이기 위해 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> High Order Component (HOC)는 REACT 응용 프로그램의 중첩 된 <Imgix> 구성 요소에 소품을 사용할 수 있도록합니다.
예를 들어, imgixParams 정의 된 응용 프로그램의 최상위 레벨에서 <ImgixProvider> 렌더링하여 모든 <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 > <Imgix> 구성 요소와 함께 부분 URL을 사용하기 위해이 동작을 활용할 수 있습니다. 제공자의 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는 제안을 제공 할 수 있지만 매우 구체적인 사용 사례 인 경우 기능을 수락하지 않을 수 있습니다. 아래 기능은 일반적인 고급 사용 사례를 고려하는 예입니다. 여기서 우리의 목표는 정상 img , picture 및 source 요소의 모든 사용법의 95%를 지원하는 것입니다.
원하는 기능 이이 비율을 벗어나면 걱정하지 마십시오! 당신은 아마도 React-Imgix의 더 강력한 API : buildURL 로 기능을 달성 할 수있을 것입니다.
이 라이브러리는 기본 URL과 일부 매개 변수가 주어진 전체 Imgix URL을 생성하기위한 순수한 기능 인 buildURL 노출시킵니다.
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 })
이 라이브러리를 사용하면 개발자가 원하는 속성을 htmlAttributes 와 함께 기본 DOM 요소에 전달할 수 있습니다.
예를 들어, 개발자가 img 구성 요소에 사용자 정의 onLoad 콜백을 첨부하려는 경우
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> Lazy Load 이미지를 원한다면 htmlAttributes 에 전달 된 loading 속성과 함께 브라우저 레벨 Lazy Loading을 사용하는 것이 좋습니다.
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/> 이 속성에는 강력한 브라우저 지원이 있으며 추가 JavaScript가없는 기능이 있습니다. 또한 브라우저 레벨 Lazy Loading을 사용하면 sizes="auto" 으로 크기 속성을 최적화 할 수있어 브라우저가 레이아웃을 기반으로 이미지의 최적 크기를 자동으로 계산할 수 있습니다.
로딩 거리와 같은 게으른로드 동작에 대한 세분화 제어가 필요한 경우 교차로 관찰자 API를 사용할 수 있습니다.
Lazysizes와 같은 라이브러리를 사용하는 경우 IMGIX 구성 요소에 일부 구성 설정을 변경하여 표준 src , srcset 및 sizes 대신 호환 속성을 생성하도록 지시 할 수 있습니다.
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> <Source /> 구성 요소에 대해 동일한 구성을 사용할 수 있습니다
NB : 데이터-* 속성의 변경 사항을 캡처하기 위해 속성 변경 플러그인을 사용하는 것이 좋습니다. 이 없으면이 라이브러리로 소품을 변경하면 렌더링 된 이미지에 영향을 미치지 않습니다.
이전과 같이 LQIP 이미지를 사용하려면 Lazysizes를 사용하는 것이 좋습니다. Lazysize와 함께 React-Imgix를 사용하기 위해 일부 구성 설정을 변경하고 HTMLATTributes에 폴백 이미지 SRC를 배치하여 표준 src , srcset 및 sizes 대신 Lazysize 호환 속성을 생성하도록 간단히 알 수 있습니다.
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB : 첫 번째 하중 후 이미지의 소품이 변경되면 품질이 낮은 이미지가 고품질 이미지를 대체합니다. 이 경우, DOM을 직접 수정하여 src 속성을 설정해야 할 수도 있고, 소품이 변경된 후 Lazysizes API를 수동으로 호출해야 할 수도 있습니다. 어쨌든,이 동작은 라이브러리 관리자가 지원하지 않으므로 자신의 위험에 따라 사용하십시오.
<Imgix ref={handleRef}> 사용하여 ref 는 Reft- <Imgix> 로 전달되었습니다. htmlAttributes 사용하여 렌더링되는 DOM 요소에 심판을 부착 할 수 있습니다.
< Imgix htmlAttributes = { { ref : handleRef } } >이것은 소스 및 그림 요소에도 적용됩니다.
이 소품은 IMGIX 및 소스 구성 요소간에 공유됩니다
일반적으로 양식 : https://[your_domain].imgix.net/[image] . 매개 변수를 포함하지 마십시오.
부분 경로를 구성 요소의 src 소품으로 사용할 때만 필요합니다. 즉, src 가 "/images/myImage.jpg" 인 경우 domain 소품을 정의해야합니다.
예를 들어 :
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > 이미지 src 에 추가 할 imgix 매개 변수.
예를 들어 :
< Imgix imgixParams = { { mask : "ellipse" } } /> 페이지에서 렌더링 될 때 개발자의 이미지 요소의 예상 크기를 지정했습니다. 너비와 유사합니다. 예 : 100vw , calc(50vw - 50px) , 500px . width 나 height 통과하지 않을 때는 적극 권장합니다. Eric Portis의 "SRCSET 및 크기"기사는 sizes 속성 사용 방법에 깊이가 있습니다.
className 최상위 구성 요소에 적용됩니다. 이미지 자체에서 className 설정하려면 htmlAttributes 참조하십시오.
이미지가 특정 높이가되도록 강요하십시오.
이미지가 특정 너비가되도록 강요하십시오.
가변 폭 SRC 세트 생성을 비활성화하여 응답 성을 가능하게합니다.
기본적 으로이 구성 요소는 생성 된 URL에 매개 변수를 추가하여 IMGIX를 분석 하고이 라이브러리에 대한 지원을 돕습니다. 이 소품을 true 로 설정하여 비활성화 할 수 있습니다.
기본적 으로이 구성 요소는 SRC 및 SRCSET에서 URL 경로를 인코딩합니다. 이 소품을 true 로 설정하여 비활성화 할 수 있습니다. Imgix 경로 인코딩의 작동 방식에 대한 자세한 내용은 Imgix/JS-Core Docs를 참조하십시오.
HTML 노드에 추가 할 다른 속성 (예 : alt , data-* , className ).
인수로 장착 된 DOM 노드를 사용하여 componentDidMount 를 호출했습니다.
SRC, SRCSET 및 크기 속성을 다른 HTML 속성으로 다시 가져올 수 있습니다. 예를 들어:
attributeConfig = { {
src : 'data-src' ,
srcSet : 'data-srcset' ,
sizes : 'data-sizes'
} } 이 맵은 SRC를 data-src 로, SRCSET으로 data-srcset 등으로 다시 맵핑합니다.
고정 크기 이미지를 렌더링 할 때 가변 q 매개 변수 생성을 비활성화합니다.
SRCSET 생성의 동작을 사용자 정의 할 수 있습니다. 유효한 옵션은 widths , widthTolerance , minWidth , maxWidth 및 devicePixelRatios 입니다. 이러한 옵션을 문서화하려면 @imgix/js-core를 참조하십시오.
className 최상위 구성 요소에 적용됩니다. 이미지 자체에서 className 설정하려면 htmlAttributes 참조하십시오.
인수로 장착 된 DOM 노드를 사용하여 componentDidMount 를 호출했습니다.
HTML 노드에 추가 할 다른 속성 (예 : alt , data-* , className ).
일반적으로 양식 : https://[your_domain].imgix.net/[image] . 매개 변수를 포함하지 마십시오.
이미지 src 에 추가 할 imgix 매개 변수. 이것은 또한 너비와 높이를 명시 적으로 설정할 수있는 방법입니다. 이에 대한 자세한 내용은 위의 "배경"섹션을 참조하십시오.
예를 들어 :
< 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 | 설명 |
|---|---|
| 낙하 | <Picture> 사용할 때 어린이의 끝에 <img> 또는 <Imgix> 가 없을 때 트리거됩니다. 브라우저가 제공된 소스와 일치 할 수 없을 때 이미지가 올바르게 렌더링되도록하려면 폴백 이미지가 중요합니다. |
| 크기 관리 | 이 라이브러리는 이미지가 반응 적으로 렌더링 될 수 있도록 sizes 소품을 전달해야합니다. 이것은 매우 특별한 상황에서만 꺼야합니다. |
| invalidarformat | ar IMGIX 매개 변수가 올바른 형식으로 전달되지 않을 때 발생하는 경고 ( w:h ) |
| 대기 크기 | 이미지가 렌더링 된 크기보다 실질적으로 더 큰 고유 한 크기로로드 될 때 런타임 오류가 트리거됩니다. |
| lazylcp | 이미지가 LCP 요소로 감지 될 때 런타임 오류가 발생하지만 loading="lazy" 로로드됩니다. |
이 릴리스는 React-Imgix API가 Imgix의 렌더링 서비스의 인라인을 더 인내합니다.
가장 큰 변경 사용자는이 프로젝트의 구성 요소가 더 이상 기본 fit=crop 매개 변수를 생성하지 않는다는 것입니다. 이것의 원래 의도는 생성 된 이미지가 치수 중 하나 이상이 지정 될 때 종횡비를 유지한다는 것입니다. 그러나 기본 Imgix API 동작은 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로 업그레이드하려면 다음과 같은 변경 사항을 변경해야합니다.
<Imgix> 의 모든 사용에 sizes 소품이 추가되어야합니다. sizes 귀하에게 새롭고 (또는 그렇지 않은 경우에도) srcset 및 sizes 에 대한 Eric의 주요 기사를 적극 권장합니다.
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 소품으로 변경하십시오.
이름 generateSrcSet 생성하여 disableSrcSet 하고 소품의 값으로 전달 된 값을 뒤집습니다. 즉, generateSrcSet={false} disableSrcSet={true} 가되거나 간단히 disableSrcSet 됩니다
SRCSET의 새로운 사용법 (예 : IE 11)을 지원하지 않는 브라우저에 대한 지원이 필요한 경우 Great Picturefill과 같은 폴리 필드를 추가하는 것이 좋습니다.
srcset , sizes 또는 picture 지원하지 않는 브라우저는 적절한 경우 기본 img src 로 우아하게 돌아갑니다. 이 브라우저에 대해 완전히 반응하는 경험을 제공하려면 React-Imgix가 PictureFill과 함께 훌륭하게 작동합니다!이 브라우저 지원은 Browserstack의 큰 지원으로 가능합니다.
이 멋진 사람들에게 감사합니다 (이모티콘 키) :
프레 더릭 포거티 ? | 셰르 윈스키 ? | Jason Eberle ? | 폴 짚 ? | 켈리 서튼 ? | 리차드 블리스 | 에릭 코 슬로 |
Baldur Helgason | 조나단 샤츠 | 테오 | 태너 교반 ? | 니콜라스 수키 | 음성 | 크레이그 코치 |
데니스 샤프 | 앤디 켄트 | 개비 로치 | 스티븐 쿡 ? | Eugene Nagorny | 사무엘 길스 | Espen Hovlandsdal |
다니엘 파렐 | Luiz Fernando da Silva Cieslak | Nick Gottlieb | 피에르 그 리무드 | 루이스 H. 볼 주니어 |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 기부금을 환영하지만 시작하기 전에 기여 가이드 라인을 검토하십시오!
React-Imgix는 원래 Frederick Fogerty에 의해 만들어졌습니다. ISC 라이센스에 따라 라이센스가 부여됩니다 (자세한 내용은 라이센스 파일 참조).
