react imgix
v9.10.0
react-imgix menyediakan komponen khusus untuk mengintegrasikan IMGIX ke dalam situs React dan menghasilkan sisi-gambar sisi server.
Sebelum Anda memulai dengan react-imgix , sangat disarankan agar Anda membaca artikel seminal Eric Portis tentang srcset dan sizes . Artikel ini menjelaskan sejarah gambar responsif dalam desain responsif, mengapa diperlukan, dan bagaimana semua teknologi ini bekerja bersama untuk menyimpan bandwidth dan memberikan pengalaman yang lebih baik bagi pengguna. Tujuan utama react-imgix adalah untuk membuat alat-alat ini lebih mudah diimplementasikan, sehingga memiliki pemahaman tentang bagaimana mereka bekerja akan secara signifikan meningkatkan pengalaman react-imgix Anda.
Di bawah ini adalah beberapa artikel lain yang membantu menjelaskan citra responsif, dan bagaimana cara kerjanya bersama Imgix:
<picture> . Membahas perbedaan antara arah seni dan switching resolusi, dan memberikan contoh bagaimana mencapai arah seni dengan imgix.srcset dan imgix. Lihat bagaimana Imgix dapat bekerja dengan srcset dan sizes untuk melayani gambar yang tepat. npm install react-imgixyarn add react-imgixModul ini mengekspor dua versi transpil. Jika bundler ES6-Module-Aware digunakan untuk mengonsumsi modul ini, itu akan mengambil versi modul ES6 dan dapat melakukan peluncuran pohon. Jika Anda tidak menggunakan modul ES6, Anda tidak perlu melakukan apa pun
import Imgix from "react-imgix" ;
// in react component
< Imgix src = { string } /> ; Untuk hanya menggunakan karena Anda akan menggunakan <img> , react-imgix dapat digunakan sebagai berikut:
import Imgix from "react-imgix" ;
< Imgix src = "https://assets.imgix.net/examples/pione.jpg" sizes = "100vw" /> ; Harap dicatat: 100vw adalah nilai sizes yang sesuai untuk gambar berbulu penuh. Jika gambar Anda tidak penuh, Anda harus menggunakan nilai yang berbeda untuk sizes . Artikel "SRCSET dan Ukuran" Eric Portis menjadi mendalam tentang cara menggunakan atribut sizes .
Ini akan menghasilkan HTML yang mirip dengan yang berikut:
< 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,
...
"
/>Karena IMGIX dapat menghasilkan resolusi turunan sebanyak yang diperlukan, React-Imgix menghitungnya secara terprogram, menggunakan dimensi yang Anda tentukan. Semua informasi ini telah ditempatkan ke dalam atribut SRCSET dan ukuran.
Lebar dan tinggi yang diketahui dan diperbaiki: Jika lebar dan tinggi diketahui sebelumnya, dan gambar ukuran tetap dicari, disarankan agar mereka diatur secara eksplisit:
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 }
/> ; Ketika lebar dan tinggi ditentukan, <Imgix> akan memberikan gambar srcset dengan deskriptor resolusi.
Lebar dan tinggi yang diketahui tetapi cairan: Jika lebar dan tinggi intrinsik gambar diketahui tetapi gambar ukuran cairan diinginkan, lebar dan tinggi masih harus diatur untuk menghindari pergeseran tata letak, tetapi mereka harus diatur melalui htmlAttributes agar tidak mengisyaratkan <Imgix> untuk menghasilkan deskriptor resolusi dalam 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 ,
} }
/> ; Dalam contoh ini, <Imgix> akan menghasilkan srcset dengan deskriptor lebar.
Perhatikan pustaka ini tidak berjalan di komponen server tetapi sebaliknya menambahkan arahan "Gunakan klien" ke komponen. Ini berarti mereka dapat digunakan bersama komponen server (misalnya, sebagai anak-anak), tetapi mereka masih membutuhkan javascript sisi klien. Komponen klien masih ssred.
React-Imgix juga bekerja dengan baik di server. Karena React-Imgix menggunakan srcset dan sizes , memungkinkan browser untuk membuat gambar berukuran benar segera setelah halaman dimuat. Jika diketahui, lulus atribut lebar dan tinggi melalui htmlAttributes untuk membantu memerangi pergeseran tata letak.
import Imgix from "react-imgix" ;
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
htmlAttributes = { {
width : 400 ,
height : 250 ,
} }
/> ; Jika lebar dan tinggi diketahui sebelumnya, dan gambar ukuran tetap dicari, atur lebar dan tinggi dan jangan atur 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 }
/> ; Komponen ini bertindak secara dinamis secara default. Komponen akan memanfaatkan srcset dan sizes untuk membuat gambar ukuran yang tepat untuk wadahnya. Ini adalah contoh dari perilaku responsif ini.
sizes harus diatur dengan benar agar ini berfungsi dengan baik, dan beberapa gaya harus digunakan untuk mengatur ukuran komponen yang diberikan. Tanpa sizes dan penataan yang benar, gambar dapat membuat ukuran penuh.
./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 > ; Rasio Aspek: Pengembang dapat melewati rasio aspek yang diinginkan, yang akan digunakan saat menghasilkan SRCSet untuk mengubah ukuran dan memotong gambar Anda seperti yang ditentukan. Agar parameter ar berlaku, pastikan bahwa parameter fit diatur ke crop .
< div className = "App" >
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "calc(10% - 10px)"
imgixParams = { { ar : "16:9" } }
/>
</ div > Rasio aspek ditentukan dalam width:height . Salah satu dimensi dapat berupa bilangan bulat atau pelampung. Semua hal berikut ini berlaku: 16: 9, 5: 1, 1.92: 1, 1: 1.67.
Jika cairan, sifat dinamis yang dijelaskan di atas tidak diinginkan, lebar dan tinggi dapat diatur secara eksplisit.
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 }
/> ; Memperbaiki rendering gambar akan secara otomatis menambahkan parameter q variabel yang dipetakan ke setiap parameter dpr saat menghasilkan SRCSET. Teknik ini umumnya digunakan untuk mengkompensasi peningkatan file gambar DPR tinggi. Karena gambar DPR tinggi ditampilkan pada kepadatan piksel yang lebih tinggi pada perangkat, kualitas gambar dapat diturunkan untuk mengurangi ukuran file secara keseluruhan tanpa mengorbankan kualitas visual yang dirasakan. Untuk informasi lebih lanjut dan contoh -contoh teknik ini beraksi, lihat posting blog ini. Perilaku ini akan menghormati nilai q utama yang dilewati melalui imgixParams dan dapat dinonaktifkan sama sekali dengan properti boolean disableQualityByDPR .
< Imgix
src = "https://domain.imgix.net/image.jpg"
width = { 100 }
disableQualityByDPR
/>Akan menghasilkan srcset berikut:
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 Gambar dapat dianggap sebagai latar belakang di belakang anak -anak dengan menggunakan <Background /> . Komponen akan mengukur ukuran alami wadah sebagaimana ditentukan oleh CSS pada halaman, dan akan membuat gambar optimal untuk dimensi tersebut.
Contoh:
// 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 > Komponen ini berbagi banyak alat peraga yang digunakan dalam komponen utama, seperti imgixParams , dan htmlAttributes .
Karena komponen harus mengukur elemen dalam DOM, ia akan memasangnya terlebih dahulu dan kemudian merenungkan kembali dengan gambar sebagai gambar latar belakang. Dengan demikian, teknik ini tidak bekerja dengan baik dengan rendering server. Jika Anda ingin ini bekerja dengan baik dengan rendering server, Anda harus mengatur lebar dan tinggi secara manual.
Atur lebar dan tinggi:
Mengatur lebar dan/atau tinggi secara eksplisit disarankan jika Anda sudah tahu ini sebelumnya. Ini akan menyimpan komponen dari keharusan melakukan dua operan render, dan akan segera membuat gambar latar belakang.
Ini dicapai dengan melewati w dan h sebagai alat peraga ke imgixparams.
< Background
src = "https://.../image.png"
imgixParams = { { w : 1920 , h : 500 } }
className = "blog-title"
>
< h2 > Blog Title </ h2 >
</ Background > Menggunakan elemen gambar Anda dapat membuat gambar responsif:
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 >Untuk mengurangi duplikasi dalam alat peraga, JSX mendukung penyebaran objek untuk alat peraga:
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 >Peringatan ditampilkan ketika tidak ada gambar fallback yang dilewati. Peringatan ini dapat dinonaktifkan dalam keadaan khusus. Untuk menonaktifkan peringatan ini, lihat di bagian Peringatan.
Komponen <ImgixProvider> lebih tinggi (HOC), membuat alat peraganya tersedia untuk komponen <Imgix> bersarang dalam aplikasi React Anda.
Misalnya, dengan merender <ImgixProvider> di tingkat atas aplikasi Anda dengan imgixParams yang ditentukan, semua komponen <Imgix> Anda akan memiliki akses ke imgixParams yang sama.
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 ;Sehingga HTML yang dihasilkan terlihat seperti
< 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 > Anda dapat memanfaatkan perilaku ini untuk menggunakan URL parsial dengan komponen <Imgix> . Dengan mendefinisikan prop domain pada penyedia, dapat diakses oleh semua komponen <Imgix> bersarang.
// 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 > ;
{
/*... */
} Kedua komponen <Imgix> di atas akan mengakses prop domain dari penyedia dan memiliki jalur src relatifnya diselesaikan ke domain yang sama. Sehingga HTML yang dihasilkan terlihat seperti:
< 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 > Alat peraga yang dapat diakses oleh <ImgixProvider> juga dapat ditimpa oleh komponen <Imgix> . Setiap penyangga yang ditentukan pada komponen <Imgix> akan mengganti nilai yang ditetapkan oleh penyedia.
// 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 > ;
{
/*... */
}Sehingga HTML yang dihasilkan terlihat seperti ini
< 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 > Untuk menghapus prop bersama dari komponen <Imgix> , prop yang sama dapat diatur ke undefined pada komponen itu sendiri.
// 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 > ;
{
/*... */
}Sehingga HTML yang dihasilkan terlihat seperti ini:
< 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 > Anda dapat menyarangkan komponen ImgixProvider untuk memastikan bahwa konsumen yang berbeda memiliki alat peraga yang berbeda.
Misalnya untuk memberikan komponen Imgix alat peraga yang berbeda dari komponen Picture , Anda dapat menyarangkan ImgixProvider di dalam yang lain.
Penyedia bersarang akan mengubah konteks untuk komponen Picture , pada dasarnya menghapus akses mereka ke alat peraga bersama yang disediakan oleh 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 >
)
} Meskipun IMGIX terbuka untuk saran fitur, kami mungkin tidak menerima fitur jika itu adalah kasus penggunaan yang sangat spesifik. Fitur di bawah ini adalah contoh dari apa yang kami anggap sebagai kasus penggunaan lanjutan umum. Target kami di sini adalah untuk mendukung 95% dari semua penggunaan elemen img , picture , dan source normal.
Jika fitur yang Anda inginkan berada di luar persentase ini, jangan khawatir! Anda mungkin masih dapat mencapai fitur Anda dengan API React-Imgix yang lebih kuat: buildURL .
Perpustakaan ini memperlihatkan fungsi murni, buildURL , untuk menghasilkan URL IMGIX penuh yang diberikan URL dasar dan beberapa parameter.
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.xURL dasar juga dapat berisi parameter kueri. Ini akan ditimpa oleh parameter apa pun yang dilewati dengan parameter kedua.
Fitur ini dapat digunakan untuk membuat elemen img khusus Anda sendiri, atau untuk digunakan dengan komponen gambar lainnya, seperti komponen gambar React-Bootstrap.
Parameter ixlib dapat dinonaktifkan oleh: buildURL(<url>, <params>, { disableLibraryParam: true })
Perpustakaan ini memungkinkan pengembang untuk melewati atribut apa pun yang mereka sukai ke elemen DOM yang mendasari dengan htmlAttributes .
Misalnya, jika pengembang ingin melampirkan panggilan balik onLoad khusus ke komponen img :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
onLoad : ( ) => handleImgOnLoad ,
} }
/> Jika Anda ingin malas memuat gambar, kami sarankan menggunakan pemuatan malas tingkat browser, dengan properti loading , diteruskan di htmlAttributes :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/> Properti ini memiliki dukungan browser yang kuat, dan berfungsi tanpa javascript tambahan. Selain itu, menggunakan pemuatan malas level browser memungkinkan optimalisasi atribut ukuran dengan sizes="auto" , yang memungkinkan browser untuk secara otomatis menghitung ukuran optimal untuk gambar berdasarkan tata letaknya.
Jika Anda membutuhkan kontrol granular atas perilaku pemuatan malas seperti jarak pemuatan, Anda dapat menggunakan API pengamat persimpangan.
Jika Anda menggunakan pustaka seperti Lazysizes, Anda dapat memberi tahu komponen IMGIX untuk menghasilkan atribut yang kompatibel alih -alih src , srcset , dan sizes standar dengan mengubah beberapa pengaturan konfigurasi:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> Konfigurasi yang sama tersedia untuk komponen <Source />
NB: Disarankan untuk menggunakan plugin perubahan atribut untuk menangkap perubahan dalam atribut data-*. Tanpa ini, mengubah alat peraga ke perpustakaan ini tidak akan berpengaruh pada gambar yang diberikan.
Jika Anda ingin menggunakan gambar LQIP, seperti sebelumnya, kami sarankan menggunakan Lazysizes. Untuk menggunakan react-imgix dengan lazysize, Anda dapat dengan mudah mengatakannya untuk menghasilkan atribut yang kompatibel dengan lazysizes, bukan src , srcset , dan sizes standar dengan mengubah beberapa pengaturan konfigurasi, dan menempatkan gambar Fallback SRC di htmlattributes:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB: Jika alat peraga gambar diubah setelah beban pertama, gambar berkualitas rendah akan menggantikan gambar berkualitas tinggi. Dalam hal ini, atribut src mungkin harus ditetapkan dengan memodifikasi DOM secara langsung, atau API yang malas mungkin harus disebut secara manual setelah alat peraga diubah. Bagaimanapun, perilaku ini tidak didukung oleh pengelola perpustakaan, jadi gunakan dengan risiko Anda sendiri.
ref yang diteruskan ke React-Imgix menggunakan <Imgix ref={handleRef}> akan melampirkan ref ke instance <Imgix> , daripada elemen DOM. Dimungkinkan untuk melampirkan ref ke elemen DOM yang diberikan menggunakan htmlAttributes :
< Imgix htmlAttributes = { { ref : handleRef } } >Ini berfungsi untuk elemen sumber dan gambar juga.
Alat peraga ini dibagikan di antara komponen imgix dan sumber
Biasanya dalam bentuk: https://[your_domain].imgix.net/[image] . Jangan sertakan parameter apa pun.
Diperlukan hanya saat menggunakan jalur parsial sebagai prop src untuk komponen. Yaitu, jika src adalah "/images/myImage.jpg" , maka prop domain perlu didefinisikan.
Misalnya :
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > Imgix Params untuk ditambahkan ke gambar src .
Misalnya :
< Imgix imgixParams = { { mask : "ellipse" } } /> Menentukan ukuran pengembang yang diharapkan dari elemen gambar ketika diterjemahkan pada halaman. Mirip dengan lebar. Misalnya 100vw , calc(50vw - 50px) , 500px . Sangat direkomendasikan saat tidak melewati width atau height . Artikel "SRCSET dan Ukuran" Eric Portis menjadi mendalam tentang cara menggunakan atribut sizes .
className diterapkan pada komponen tingkat atas. Untuk mengatur className pada gambar itu sendiri, lihat htmlAttributes .
Memaksa gambar menjadi ketinggian tertentu.
Memaksa gambar menjadi lebar tertentu.
Nonaktifkan pembuatan variabel lebar set SRC untuk memungkinkan responsif.
Secara default komponen ini menambahkan parameter ke URL yang dihasilkan untuk membantu Imgix dengan analitik dan dukungan untuk perpustakaan ini. Ini dapat dinonaktifkan dengan mengatur alat peraga ini ke true .
Secara default komponen ini mengkodekan jalur URL di SRC dan SRCSET. Ini dapat dinonaktifkan dengan mengatur alat peraga ini ke true . Untuk informasi lebih lanjut tentang cara kerja pengkodean jalur imgix, silakan merujuk ke dokumen IMGIX/JS-Core.
Atribut lain apa pun untuk ditambahkan ke node HTML (Contoh: alt , data-* , className ).
Dipanggil pada componentDidMount dengan node DOM yang dipasang sebagai argumen.
Memungkinkan atribut SRC, SRCSET, dan ukuran untuk dipetakan kembali ke berbagai atribut HTML. Misalnya:
attributeConfig = { {
src : 'data-src' ,
srcSet : 'data-srcset' ,
sizes : 'data-sizes'
} } Ini memetakan ulang SRC ke data-src , srcset ke data-srcset , dll.
Nonaktifkan generasi parameter q variabel saat merender gambar ukuran tetap.
Memungkinkan menyesuaikan perilaku generasi SRCSET. Opsi yang valid adalah widths , widthTolerance , minWidth , maxWidth , dan devicePixelRatios . Lihat @imgix/js-core untuk dokumentasi opsi ini.
className diterapkan pada komponen tingkat atas. Untuk mengatur className pada gambar itu sendiri, lihat htmlAttributes .
Dipanggil pada componentDidMount dengan node DOM yang dipasang sebagai argumen.
Atribut lain apa pun untuk ditambahkan ke node HTML (Contoh: alt , data-* , className ).
Biasanya dalam bentuk: https://[your_domain].imgix.net/[image] . Jangan sertakan parameter apa pun.
Imgix Params untuk ditambahkan ke gambar src . Ini juga bagaimana lebar dan tinggi dapat diatur secara eksplisit. Untuk informasi lebih lanjut tentang ini, lihat bagian "Latar Belakang" di atas.
Misalnya :
< Background imgixParams = { { mask : "ellipse" } } /> className diterapkan pada komponen tingkat atas. Untuk mengatur className pada gambar itu sendiri, lihat htmlAttributes .
Secara default komponen ini menambahkan parameter ke URL yang dihasilkan untuk membantu Imgix dengan analitik dan dukungan untuk perpustakaan ini. Ini dapat dinonaktifkan dengan mengatur alat peraga ini ke true .
Atribut lain apa pun untuk ditambahkan ke node HTML (Contoh: alt , data-* , className ).
Perpustakaan ini memicu beberapa peringatan dalam situasi tertentu untuk mencoba membantu pengembang dalam meningkatkan atau gagal-cepat. Ini kadang -kadang bisa salah karena kesulitan dalam mendeteksi situasi kesalahan. Ini menjengkelkan, dan ada cara untuk mematikannya. Ini tidak disarankan untuk pemula, tetapi jika Anda menggunakan komponen khusus atau fitur canggih lainnya, kemungkinan Anda harus mematikannya.
Peringatan dapat dimatikan dengan API konfigurasi publik, PublicConfigAPI , yang diekspor di tingkat atas.
// in init script/application startup
import { PublicConfigAPI } from "react-imgix" ;
PublicConfigAPI . disableWarning ( '<warningName>' ) ;
//... rest of app startup
React . render ( ... ) ; Peringatan juga dapat diaktifkan dengan PublicConfigAPI.enableWarning('<warningName>')
Peringatan yang tersedia adalah:
warningName | Keterangan |
|---|---|
| FallbackImage | Dipicu saat tidak ada <img> atau <Imgix> di akhir anak -anak saat menggunakan <Picture> . Gambar fallback sangat penting untuk memastikan gambar diterjemahkan dengan benar ketika browser tidak dapat cocok dengan sumber yang disediakan |
| Ukuran | Perpustakaan ini membutuhkan sizes prop untuk dilewatkan sehingga gambar dapat membuat secara responsif. Ini seharusnya hanya dimatikan dalam keadaan yang sangat khusus. |
| Invalidarformat | Peringatan dilemparkan ketika parameter ar imgix tidak dilewati dalam format yang benar ( w:h ) |
| oversizeImage | Kesalahan runtime dipicu ketika gambar memuat dengan ukuran intrinsik secara substansial lebih besar dari ukuran yang diberikan. |
| Lazylcp | Kesalahan runtime yang dipicu ketika suatu gambar terdeteksi menjadi elemen LCP tetapi dimuat dengan loading="lazy" . |
Rilis ini membawa API React-Imgix lebih sesuai dengan layanan rendering Imgix.
Pengguna perubahan terbesar yang akan diperhatikan adalah bahwa komponen proyek ini tidak akan lagi menghasilkan parameter fit=crop default. Niat asli di balik ini adalah bahwa gambar yang dihasilkan akan mempertahankan rasio aspek ketika setidaknya satu dimensi ditentukan. Namun, set perilaku API imgix default fit=clip , yang sekarang tercermin dalam proyek ini. Meskipun ini mungkin tidak menyebabkan perubahan untuk semua pengguna, ini dapat mengakibatkan perilaku gambar yang tidak biasa dalam beberapa kasus. Dengan demikian, kami lebih suka berbuat salah di sisi kehati -hatian dan memberikan pengguna kemampuan untuk memilih perubahan ini melalui rilis utama.
Jika Anda saat ini mengandalkan generasi default fit=crop saat membuat gambar, Anda sekarang harus secara manual menentukannya saat memohon komponen:
< Imgix
src = "https://assets.imgix.net/examples/pione.jpg"
sizes = "100vw"
imgixParams = { { fit : "crop" } }
/> Perubahan besar lainnya berkaitan dengan bagaimana komponen menentukan rasio aspek gambar. Alih -alih menambahkan tinggi yang dihitung h= nilai berdasarkan dimensi yang ditentukan, string URL sekarang akan dibangun menggunakan parameter rasio aspek IMGIX ar= . Untungnya, antarmuka untuk menentukan rasio aspek tidak berbeda dari sebelumnya. Namun, pengguna harus lulus dalam parameter fit=crop agar dapat berlaku:
< Imgix
src = "http://assets.imgix.net/examples/pione.jpg"
width = { 400 }
imgixParams = { { ar : "2:1" , fit : "crop" } }
/>Ini adalah pembaruan yang sangat besar untuk perpustakaan ini dengan banyak perubahan besar. Kami mohon maaf atas masalah apa pun yang mungkin ditimbulkan, dan kami telah mencoba mengurangi jumlah perubahan yang melanggar. Kami juga telah bekerja untuk mengumpulkan semua perubahan ini menjadi satu rilis untuk mengurangi dampaknya. Kami tidak berencana membuat perubahan besar untuk sementara waktu setelah ini, dan akan fokus pada penambahan fitur.
Perubahan terbesar dalam benjolan versi utama ini adalah pindah ke srcSet berbasis lebar dan sizes untuk responsif. Ini memiliki sejumlah manfaat, termasuk rendering server yang lebih baik, responsif yang lebih baik, lebih sedikit potensi untuk bug, dan peningkatan kinerja. Ini berarti bahwa perilaku fitting-to-container yang lama telah dihapus. Jika ini diperlukan, contoh bagaimana hal ini dapat dicapai dapat ditemukan di sini
Untuk meningkatkan ke versi 8, perubahan berikut harus dilakukan.
sizes prop harus ditambahkan ke semua penggunaan <Imgix> . Jika sizes baru bagi Anda (atau bahkan jika tidak), artikel seminal Eric tentang srcset dan sizes sangat disarankan.
Ubah semua penggunaan type='picture' menjadi <Picture> dan type='source' ke <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 >Lihat dukungan gambar untuk informasi lebih lanjut.
Hapus semua penggunaan type='bg' karena tidak lagi didukung. Diputuskan bahwa terlalu sulit untuk mengimplementasikan fitur ini secara konsisten. Jika Anda masih ingin menggunakan fitur ini, harap berikan masalah ini: #160 Jika kami mendapatkan cukup permintaan untuk ini, kami akan mengimplementasikannya kembali.
Lepaskan alat peraga aggressiveLoad , component , fluid , precision karena tidak lagi digunakan.
Ubah semua penggunaan defaultHeight dan defaultWidth menjadi alat peraga width dan height .
Ganti nama generateSrcSet ke disableSrcSet dan membalikkan nilai yang diturunkan sebagai nilai prop. IE generateSrcSet={false} menjadi disableSrcSet={true} atau hanya disableSrcSet
Jika dukungan diperlukan untuk browser yang tidak mendukung penggunaan SRCSET baru (seperti IE 11), kami merekomendasikan untuk menambahkan polyfill, seperti Picturefill yang hebat.
srcset , sizes , atau picture akan dengan anggun kembali ke img src default bila perlu. Jika Anda ingin memberikan pengalaman yang sepenuhnya responsif untuk browser ini, React-Imgix bekerja dengan baik bersama Picturefill!Dukungan browser ini dimungkinkan oleh dukungan besar dari BrowserStack.
Terima kasih kepada orang -orang yang luar biasa ini (Kunci 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. |
Proyek ini mengikuti spesifikasi semua-kontributor. Kontribusi apa pun yang baik, tetapi tinjau pedoman kontribusi sebelum memulai!
React-Imgix awalnya dibuat oleh Frederick Fogerty. Ini dilisensikan di bawah lisensi ISC (lihat file lisensi untuk info lebih lanjut).
