react imgix

react-imgix จัดเตรียมส่วนประกอบที่กำหนดเองสำหรับการรวม IMGIX เข้ากับไซต์ React และสร้างภาพฝั่งเซิร์ฟเวอร์

---

• ภาพรวม / ทรัพยากร
• การติดตั้ง
• การใช้งาน
  • ตัวอย่าง
    • กรณีการใช้งานพื้นฐาน
    • การเรนเดอร์ฝั่งเซิร์ฟเวอร์
    • การแสดงภาพที่ยืดหยุ่น
    • การแสดงภาพคงที่ (เช่นไม่ยืดหยุ่น)
    • โหมดพื้นหลัง
    • การสนับสนุนรูปภาพ
    • ส่วนประกอบ imgixprovider
  • ตัวอย่างขั้นสูง
    • การใช้งานขั้นสูงทั่วไป
    • ผ่านแอตทริบิวต์ HTML ที่กำหนดเอง
    • ขี้เกียจโหลด
    • เทคนิคการจับภาพภาพคุณภาพต่ำ (LQIP)
    • การแนบอ้างอิงกับองค์ประกอบ DOM
  • อุปกรณ์ประกอบฉาก
    • อุปกรณ์ประกอบฉากที่ใช้ร่วมกัน (Imgix, Source)
    • อุปกรณ์ประกอบฉาก
    • อุปกรณ์ประกอบฉากพื้นหลัง
  • การกำหนดค่าทั่วโลก
    • คำเตือน
• คำแนะนำอัพเกรด
  • 8.x ถึง 9.0
  • 7.x ถึง 8.0
• การสนับสนุนเบราว์เซอร์
• ผู้มีส่วนร่วม
• เมตา

ภาพรวม / ทรัพยากร

ก่อนที่คุณจะเริ่มต้นด้วย React-Imgix ขอแนะนำอย่างยิ่ง ให้คุณอ่านบทความน้ำเชื้อของ Eric Portis เกี่ยวกับ srcset และ sizes บทความนี้อธิบายถึงประวัติความเป็นมาของภาพที่ตอบสนองในการออกแบบที่ตอบสนองได้ทำไมพวกเขาถึงจำเป็นและเทคโนโลยีทั้งหมดเหล่านี้ทำงานร่วมกันเพื่อประหยัดแบนด์วิดท์และมอบประสบการณ์ที่ดีขึ้นสำหรับผู้ใช้ เป้าหมายหลักของ React-Imgix คือการทำให้เครื่องมือเหล่านี้ง่ายขึ้นสำหรับนักพัฒนาในการใช้งานดังนั้นการทำความเข้าใจว่าพวกเขาทำงานอย่างไรจะช่วยปรับปรุงประสบการณ์การตอบสนองของคุณอย่างมีนัยสำคัญ

ด้านล่างนี้เป็นบทความอื่น ๆ ที่ช่วยอธิบายภาพที่ตอบสนองได้และวิธีการทำงานร่วมกับ IMGIX:

• ใช้ imgix กับ <picture> กล่าวถึงความแตกต่างระหว่างทิศทางศิลปะและการสลับการแก้ปัญหาและแสดงตัวอย่างของวิธีการบรรลุทิศทางศิลปะด้วย imgix
• ภาพตอบสนองด้วย srcset และ IMGIX ดูว่า IMGIX สามารถทำงานกับ srcset และ sizes ได้อย่างไรเพื่อให้บริการภาพที่ถูกต้อง

การติดตั้ง

• NPM : npm install react-imgix
• เส้นด้าย : yarn add react-imgix

โมดูลนี้ส่งออกสองรุ่น transpiled หากมีการใช้ Bundler ที่รับรู้ถึงโมดูล 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 และขนาด" ของ Eric Portis นั้นลึกลงไปในเชิงลึกเกี่ยวกับวิธีการใช้แอตทริบิวต์ 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 ที่มีตัวบ่งชี้ความกว้าง

การเรนเดอร์ฝั่งเซิร์ฟเวอร์

หมายเหตุไลบรารีนี้ไม่ได้ทำงานในส่วนประกอบเซิร์ฟเวอร์ แต่จะเพิ่มคำสั่ง "ใช้ไคลเอนต์" ให้กับส่วนประกอบแทน ซึ่งหมายความว่าพวกเขาสามารถใช้ร่วมกับส่วนประกอบเซิร์ฟเวอร์ (ตัวอย่างเช่นในฐานะเด็ก) แต่พวกเขายังต้องการจาวาสคริปต์ฝั่งไคลเอ็นต์ ส่วนประกอบของลูกค้ายังคงเป็น 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 > ;

อัตราส่วนภาพ: นักพัฒนาสามารถผ่านอัตราส่วนภาพที่ต้องการซึ่งจะใช้เมื่อสร้าง SRCSets เพื่อปรับขนาดและครอบตัดภาพของคุณตามที่ระบุ เพื่อให้พารามิเตอร์ 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

<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 Prop จากผู้ให้บริการและให้เส้นทาง 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 })

ผ่านแอตทริบิวต์ HTML ที่กำหนดเอง

ไลบรารีนี้อนุญาตให้นักพัฒนาผ่านแอตทริบิวต์ใด ๆ ที่พวกเขาชอบไปยังองค์ประกอบ DOM พื้นฐานด้วย htmlAttributes

ตัวอย่างเช่นหากผู้พัฒนาต้องการแนบการโทรกลับ onLoad แบบกำหนดเองกับส่วนประกอบ img :

 < Imgix
  src = "..."
  sizes = "..."
  htmlAttributes = { {
    onLoad : ( ) => handleImgOnLoad ,
  } }
/> 

ขี้เกียจโหลด

หากคุณต้องการโหลดภาพขี้เกียจเราขอแนะนำให้ใช้การโหลดขี้เกียจระดับเบราว์เซอร์ด้วยคุณสมบัติ loading ส่งผ่านใน htmlAttributes :

 < Imgix
  src = "..."
  sizes = "..."
  htmlAttributes = { {
    loading : "lazy"
  } }
/>

คุณสมบัตินี้มีการสนับสนุนเบราว์เซอร์ที่แข็งแกร่งและฟังก์ชั่นโดยไม่ต้องใช้ JavaScript เพิ่มเติม นอกจากนี้การใช้การโหลด Lazy Lazy ระดับเบราว์เซอร์ช่วยให้การปรับแอตทริบิวต์ขนาดให้เหมาะสมด้วย 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: ขอแนะนำให้ใช้ปลั๊กอินการเปลี่ยนแปลงแอตทริบิวต์เพื่อจับภาพการเปลี่ยนแปลงในแอตทริบิวต์ Data-* หากไม่มีสิ่งนี้การเปลี่ยนอุปกรณ์ประกอบฉากเป็นไลบรารีนี้จะไม่มีผลต่อภาพที่แสดงผล

เทคนิคการจับภาพภาพคุณภาพต่ำ (LQIP)

หากคุณต้องการใช้ภาพ LQIP อย่างก่อนเราขอแนะนำให้ใช้ lazysizes ในการใช้ React-Imgix กับ Lazysizes คุณสามารถบอกได้ว่าจะสร้างแอตทริบิวต์ที่เข้ากันได้กับ Lazysizes แทน src มาตรฐาน srcset และ sizes โดยการเปลี่ยนการตั้งค่าการกำหนดค่าบางอย่าง

 < Imgix
  className = "lazyload"
  src = "..."
  sizes = "..."
  attributeConfig = { {
    src : "data-src" ,
    srcSet : "data-srcset" ,
    sizes : "data-sizes" ,
  } }
  htmlAttributes = { {
    src : "..." , // low quality image here
  } }
/>

NB: หากอุปกรณ์ประกอบฉากของภาพเปลี่ยนไปหลังจากโหลดครั้งแรกภาพคุณภาพต่ำจะแทนที่ภาพคุณภาพสูง ในกรณีนี้แอตทริบิวต์ src อาจต้องตั้งค่าโดยการแก้ไข DOM โดยตรงหรือ Lazysizes API อาจต้องเรียกด้วยตนเองหลังจากเปลี่ยนอุปกรณ์ประกอบฉาก ไม่ว่าในกรณีใดพฤติกรรมนี้ไม่ได้รับการสนับสนุนจากผู้ดูแลห้องสมุดดังนั้นให้ใช้ความเสี่ยงของคุณเอง

การแนบอ้างอิงกับองค์ประกอบ DOM

ref ส่งผ่านไปยัง React-Imgix โดยใช้ <Imgix ref={handleRef}> จะแนบ ref กับอินสแตนซ์ <Imgix> แทนที่จะเป็นองค์ประกอบ DOM เป็นไปได้ที่จะแนบ ref กับองค์ประกอบ DOM ที่แสดงผลโดยใช้ htmlAttributes :

 < Imgix htmlAttributes = { { ref : handleRef } } >

สิ่งนี้ใช้ได้กับองค์ประกอบแหล่งที่มาและรูปภาพเช่นกัน

อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉากที่ใช้ร่วมกัน (Imgix, Source)

อุปกรณ์ประกอบฉากเหล่านี้ถูกแชร์ระหว่างส่วนประกอบ IMGIX และแหล่งที่มา

src :: string จำเป็น

โดยปกติจะอยู่ในรูปแบบ: https://[your_domain].imgix.net/[image] อย่ารวมพารามิเตอร์ใด ๆ

โดเมน :: สตริงเป็นทางเลือก

ต้องใช้เฉพาะเมื่อใช้เส้นทางบางส่วนเป็น src POP สำหรับส่วนประกอบ คือถ้า src คือ "/images/myImage.jpg" ดังนั้นต้องมีการกำหนดเสา domain

ตัวอย่างเช่น :

 < Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > 

imgixparams :: วัตถุ

imgix params เพื่อเพิ่มลงในภาพ src

ตัวอย่างเช่น :

 < Imgix imgixParams = { { mask : "ellipse" } } /> 

ขนาด :: สตริง

ระบุขนาดที่คาดหวังของนักพัฒนาซอฟต์แวร์ขององค์ประกอบภาพเมื่อแสดงผลบนหน้า คล้ายกับความกว้าง เช่น 100vw , calc(50vw - 50px) , 500px แนะนำเป็นอย่างยิ่งเมื่อไม่ผ่าน width หรือ height บทความ "SRCSET และขนาด" ของ Eric Portis นั้นลึกลงไปในเชิงลึกเกี่ยวกับวิธีการใช้แอตทริบิวต์ sizes

classname :: String

className นำไปใช้กับส่วนประกอบระดับบนสุด ในการตั้งค่า className บนภาพเองให้ดู htmlAttributes

ความสูง :: จำนวน

บังคับให้ภาพมีความสูง

ความกว้าง :: หมายเลข

บังคับภาพให้มีความกว้างที่แน่นอน

disableRcset :: bool, default = false

ปิดใช้งานการสร้างความกว้างของตัวแปร SRC ชุดเพื่อเปิดใช้งานการตอบสนอง

disablelibraryparam :: bool

โดยค่าเริ่มต้นส่วนประกอบนี้จะเพิ่มพารามิเตอร์ให้กับ URL ที่สร้างขึ้นเพื่อช่วย IMGIX ด้วยการวิเคราะห์และการสนับสนุนสำหรับไลบรารีนี้ สิ่งนี้สามารถปิดใช้งานได้โดยการตั้งค่าเสานี้เป็น true

disablepathencoding :: bool

โดยค่าเริ่มต้นส่วนประกอบนี้เข้ารหัสเส้นทาง URL ใน SRC และ SRCSET สิ่งนี้สามารถปิดใช้งานได้โดยการตั้งค่าเสานี้เป็น true สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการเข้ารหัสเส้นทาง IMGIX โปรดดูเอกสาร IMGIX/JS-CORE

htmlattributes :: วัตถุ

แอตทริบิวต์อื่นใดที่จะเพิ่มลงในโหนด HTML (ตัวอย่าง: alt , data-* , className )

onmounted :: func

เรียกว่า componentDidMount ด้วยโหนด DOM ที่ติดตั้งเป็นอาร์กิวเมนต์

attributeConfig :: วัตถุ

อนุญาตให้มีแอตทริบิวต์ SRC, SRCSET และขนาดที่จะทำการแมปไปยังแอตทริบิวต์ HTML ที่แตกต่างกัน ตัวอย่างเช่น:

  attributeConfig = { {
    src : 'data-src' ,
    srcSet : 'data-srcset' ,
    sizes : 'data-sizes'
  } }

การแมปใหม่ SRC ไปยัง data-src , SRCSET ถึง data-srcset ฯลฯ

disablequalitybydpr :: bool, default = false

ปิดใช้งานการสร้างพารามิเตอร์ q ตัวแปรเมื่อแสดงภาพขนาดคงที่

srcsetOptions :: วัตถุ

อนุญาตให้ปรับแต่งพฤติกรรมของการสร้าง SRCSET ตัวเลือกที่ถูกต้องคือ widths , widthTolerance , minWidth , maxWidth และ devicePixelRatios ดู @imgix/js-core สำหรับเอกสารของตัวเลือกเหล่านี้

อุปกรณ์ประกอบฉาก

classname :: String

className นำไปใช้กับส่วนประกอบระดับบนสุด ในการตั้งค่า className บนภาพเองให้ดู htmlAttributes

onmounted :: func

เรียกว่า componentDidMount ด้วยโหนด DOM ที่ติดตั้งเป็นอาร์กิวเมนต์

htmlattributes :: วัตถุ

แอตทริบิวต์อื่นใดที่จะเพิ่มลงในโหนด HTML (ตัวอย่าง: alt , data-* , className )

อุปกรณ์ประกอบฉากพื้นหลัง

src :: string จำเป็น

โดยปกติจะอยู่ในรูปแบบ: https://[your_domain].imgix.net/[image] อย่ารวมพารามิเตอร์ใด ๆ

imgixparams :: วัตถุ

imgix params เพื่อเพิ่มลงในภาพ src นี่คือความกว้างและความสูงที่สามารถตั้งค่าได้อย่างชัดเจน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ดูส่วน "พื้นหลัง" ด้านบน

ตัวอย่างเช่น :

 < Background imgixParams = { { mask : "ellipse" } } /> 

classname :: String

className นำไปใช้กับส่วนประกอบระดับบนสุด ในการตั้งค่า className บนภาพเองให้ดู htmlAttributes

disablelibraryparam :: bool

โดยค่าเริ่มต้นส่วนประกอบนี้จะเพิ่มพารามิเตอร์ให้กับ URL ที่สร้างขึ้นเพื่อช่วย IMGIX ด้วยการวิเคราะห์และการสนับสนุนสำหรับไลบรารีนี้ สิ่งนี้สามารถปิดใช้งานได้โดยการตั้งค่าเสานี้เป็น true

htmlattributes :: วัตถุ

แอตทริบิวต์อื่นใดที่จะเพิ่มลงในโหนด 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	คำอธิบาย
ทางเลือก	ทริกเกอร์เมื่อไม่มี <img> หรือ <Imgix> ในตอนท้ายของเด็กเมื่อใช้ <Picture> ภาพทางเลือกเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าภาพแสดงผลอย่างถูกต้องเมื่อเบราว์เซอร์ไม่สามารถจับคู่กับแหล่งที่มาได้
ขนาด	ไลบรารีนี้ต้องใช้ sizes เสาเพื่อให้ภาพสามารถแสดงผลได้อย่างตอบสนอง สิ่งนี้ควรปิดในสถานการณ์พิเศษเท่านั้น
การใช้งานแบบไม่ถูกต้อง	คำเตือนโยนเมื่อพารามิเตอร์ ar IMGIX ไม่ผ่านในรูปแบบที่ถูกต้อง ( w:h )
มีขนาดใหญ่เกินไป	ข้อผิดพลาดรันไทม์ที่เกิดขึ้นเมื่อภาพโหลดด้วยขนาดที่แท้จริงใหญ่กว่าขนาดที่แสดงผลอย่างมาก
lazylcp	ข้อผิดพลาดรันไทม์ที่ทริกเกอร์เมื่อตรวจพบภาพเป็นองค์ประกอบ LCP แต่โหลดด้วย loading="lazy"

คำแนะนำอัพเกรด

8.x ถึง 9.0

การเปิดตัวครั้งนี้ทำให้ 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 ASPAST ar= โชคดีที่อินเทอร์เฟซสำหรับการระบุอัตราส่วนภาพไม่แตกต่างจากก่อน อย่างไรก็ตามผู้ใช้จะต้องผ่านพารามิเตอร์ fit=crop เพื่อให้มีผล:

 < Imgix
  src = "http://assets.imgix.net/examples/pione.jpg"
  width = { 400 }
  imgixParams = { { ar : "2:1" , fit : "crop" } }
/>

7.x ถึง 8.0

นี่คือการอัปเดตที่ใหญ่มากสำหรับไลบรารีนี้ที่มีการเปลี่ยนแปลงมากมาย ขออภัยสำหรับปัญหาใด ๆ ที่อาจเกิดขึ้นและเราได้พยายามลดจำนวนการเปลี่ยนแปลงที่แตกหัก นอกจากนี้เรายังได้ทำงานเพื่อสร้างการเปลี่ยนแปลงทั้งหมดเหล่านี้ลงในการเปิดตัวครั้งเดียวเพื่อลดผลกระทบ เราไม่ได้วางแผนที่จะทำการเปลี่ยนแปลงในระยะเวลาหนึ่งหลังจากนี้และจะเพ่งความสนใจไปที่การเพิ่มคุณสมบัติ

การเปลี่ยนแปลงที่ใหญ่ที่สุดในรุ่นสำคัญนี้คือการย้ายไปยัง srcSet และขนาดที่ใช้ความกว้างและ sizes สำหรับการตอบสนอง สิ่งนี้มีโฮสต์ของผลประโยชน์รวมถึงการเรนเดอร์เซิร์ฟเวอร์ที่ดีขึ้นการตอบสนองที่ดีขึ้นศักยภาพน้อยลงสำหรับข้อบกพร่องและการปรับปรุงประสิทธิภาพ นี่หมายความว่าพฤติกรรมขนาดที่เหมาะสมกับคอนเดนเนอร์แบบเก่าได้ถูกลบออกไป หากจำเป็นต้องพบตัวอย่างของวิธีการที่สามารถทำได้ที่นี่

ในการอัพเกรดเป็นเวอร์ชัน 8 ควรทำการเปลี่ยนแปลงต่อไปนี้

• ควรเพิ่มเสา sizes ให้กับการใช้งานทั้งหมดของ <Imgix> หาก sizes เป็นเรื่องใหม่สำหรับคุณ (หรือแม้ว่าจะไม่ได้) บทความน้ำเชื้อของ Eric เกี่ยวกับ 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

• เปลี่ยนชื่อ generateSrcSet เป็น disableSrcSet และกลับค่าที่ส่งผ่านเป็นค่าของเสา IE generateSrcSet={false} กลายเป็น disableSrcSet={true} หรือเพียงแค่ disableSrcSet

• หากจำเป็นต้องมีการสนับสนุนสำหรับเบราว์เซอร์ที่ไม่รองรับการใช้งานใหม่ของ SRCSET (เช่น IE 11) เราแนะนำให้เพิ่ม polyfill เช่น The Great Picturefill

การสนับสนุนเบราว์เซอร์

• โดยค่าเริ่มต้นเบราว์เซอร์ที่ไม่รองรับ srcset sizes หรือ picture จะกลับไปที่ img src เริ่มต้นอย่างสง่างามเมื่อเหมาะสม หากคุณต้องการมอบประสบการณ์ที่ตอบสนองอย่างเต็มที่สำหรับเบราว์เซอร์เหล่านี้ React-Imgix ใช้งานได้ดีควบคู่ไปกับ PictureFill!
• เราสนับสนุน Google Chrome เวอร์ชันล่าสุด (ซึ่งอัปเดตโดยอัตโนมัติเมื่อใดก็ตามที่ตรวจพบว่ามีเบราว์เซอร์เวอร์ชันใหม่) นอกจากนี้เรายังสนับสนุนการเผยแพร่เดสก์ท็อป Firefox, Internet Explorer และ Safari ในปัจจุบันและก่อนหน้านี้ การสนับสนุนมือถือได้รับการทดสอบในรุ่นรองล่าสุดของรุ่นปัจจุบันและรุ่นก่อนหน้าสำหรับเบราว์เซอร์เริ่มต้นบน iOS และ Android (เช่น iOS 9.2 และ 8.4) ทุกครั้งที่มีการเปิดตัวเวอร์ชันใหม่เราจะเริ่มสนับสนุนเวอร์ชันนั้นและหยุดรองรับเวอร์ชันล่าสุดที่สาม

การสนับสนุนเบราว์เซอร์นี้เกิดขึ้นได้จากการสนับสนุนที่ยอดเยี่ยมจาก BrowserStack

ผู้มีส่วนร่วม

ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):

Frederick Fogerty -	เชอร์วินสกี -	Jason Eberle -	ฟางพอล -	Kelly Sutton -	Richard Bliss	Eric Koslow
Baldur Helgason	Jonathan Schatz	ธีโอ	คนฟอกหนัง -	Nicholas Suski	เสียง	Craig Kochis
Dennis Schaaf	Andy Kent	Gabby Losch	สตีเฟ่นคุก -	Eugene Nagorny	ซามูเอลไจล์ส	Espen Hovlandsdal
Daniel Farrell	Luiz Fernando da Silva Cieslak	Nick Gottlieb	ปิแอร์กริมดอด	Luis H. Ball Jr.

โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ แต่โปรดตรวจสอบแนวทางการบริจาคก่อนเริ่มต้นใช้งาน!

เมตา

React-Imgix ถูกสร้างขึ้นโดย Frederick Fogerty ได้รับใบอนุญาตภายใต้ใบอนุญาต ISC (ดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม)