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-Module-Awarler لتلبية هذه الوحدة ، فستلتقط إصدار وحدة 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 والأحجام" حول كيفية استخدام سمة 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> الصورة SRCSEST مع واصفات الدقة.
العرض والطول المعروفان ولكن السائل: إذا كان العرض الجوهري للصورة وارتفاعه معروفًا ولكن يجب أن يتم ضبط صورة حجم السوائل ، ويجب ضبط العرض والارتفاع لتجنب تحول التخطيط ، ولكن يجب ضبطها عبر htmlAttributes حتى لا تلميح إلى <Imgix> لإنتاج واصفات الدقة في SRCSEST.
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 > ; نسبة العرض إلى الارتفاع: يمكن للمطور تمرير نسبة العرض إلى الارتفاع المطلوبة ، والتي سيتم استخدامها عند إنشاء 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. تُستخدم هذه التقنية بشكل شائع للتعويض عن زيادة ملفات الصور عالية الدقة. نظرًا لعرض الصور عالية الدقة بكثافة أعلى بكسل على الأجهزة ، يمكن تخفيض جودة الصورة لتقليل ملفات الملفات بشكل عام دون التضحية بالجودة المرئية المتصورة. لمزيد من المعلومات وأمثلة على هذه التقنية في العمل ، راجع منشور المدونة هذا. سيحترم هذا السلوك أي قيمة q غالبة يتم تمريرها عبر imgixParams ويمكن تعطيلها تمامًا مع Property Property disableQualityByDPR .
< Imgix
src = "https://domain.imgix.net/image.jpg"
width = { 100 }
disableQualityByDPR
/>سوف يولد SRCSEST التالي:
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 > يمكنك Nest 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 العادية.
إذا سقطت الميزة المطلوبة خارج هذه النسبة ، فلا تقلق! من المحتمل أنك ستظل قادرًا على تحقيق الميزات الخاصة بك من خلال واجهة برمجة تطبيقات 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 ,
} }
/> إذا كنت ترغب في تحميل الصور الكسولة ، فإننا نوصي باستخدام تحميل كسول على مستوى المتصفح ، مع خاصية loading ، التي تم تمريرها في htmlAttributes :
< Imgix
src = "..."
sizes = "..."
htmlAttributes = { {
loading : "lazy"
} }
/> تحتوي هذه الخاصية على دعم متصفح قوي ، ووظائف بدون javaScript إضافية. بالإضافة إلى ذلك ، يتيح استخدام التحميل الكسول على مستوى المتصفح تحسين سمة الأحجام مع sizes="auto" ، والذي يسمح للمتصفح بحساب الحجم الأمثل للصورة تلقائيًا على أساس تخطيطه.
إذا كنت بحاجة إلى التحكم الحبيبي في سلوك التحميل الكسول مثل مسافة التحميل ، فيمكنك استخدام واجهة برمجة تطبيقات Ontersection Observer.
إذا كنت تستخدم مكتبة مثل Lazysizes ، فيمكنك إخبار مكون Imgix بإنشاء سمات متوافقة بدلاً من src و srcset القياسية sizes عن طريق تغيير بعض إعدادات التكوين:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
/> يتوفر نفس التكوين لسيارات <Source />
NB: يوصى باستخدام المكون الإضافي لتغيير السمة من أجل التقاط التغييرات في سمات البيانات-*. بدون هذا ، لن يكون لتغيير الدعائم إلى هذه المكتبة أي تأثير على الصورة المقدمة.
إذا كنت ترغب في استخدام صور LQIP ، كما كان من قبل ، نوصي باستخدام Lazysizes. من أجل استخدام React-IMGIX مع lazysizes ، يمكنك ببساطة إخباره بإنشاء سمات متوافقة مع src القياسية SRC و srcset sizes عن طريق تغيير بعض إعدادات التكوين ، ووضع صورة SRC الاحتياطية في HTMLATTRIBUTES:
< Imgix
className = "lazyload"
src = "..."
sizes = "..."
attributeConfig = { {
src : "data-src" ,
srcSet : "data-srcset" ,
sizes : "data-sizes" ,
} }
htmlAttributes = { {
src : "..." , // low quality image here
} }
/> NB: إذا تم تغيير الدعائم من الصورة بعد التحميل الأول ، فسوف تحل صورة الجودة المنخفضة محل الصورة عالية الجودة. في هذه الحالة ، قد يتعين تعيين سمة src عن طريق تعديل DOM مباشرة ، أو قد يتعين استدعاء واجهة برمجة تطبيقات التلاشي يدويًا بعد تغيير الدعائم. في أي حال ، لا يتم دعم هذا السلوك من قبل محفوظات المكتبة ، لذلك استخدم على مسؤوليتك الخاصة.
ref الذي تم تمريره للتفاعل مع IMGIX باستخدام <Imgix ref={handleRef}> سوف يرفق المرجع بمثابة <Imgix> ، بدلاً من عنصر DOM. من الممكن إرفاق المرجع بعنصر DOM الذي يتم تقديمه باستخدام htmlAttributes :
< Imgix htmlAttributes = { { ref : handleRef } } >هذا يعمل مع عناصر المصدر والصور كذلك.
تتم مشاركة هذه الدعائم بين مكونات IMGIX والمصدر
عادة في النموذج: https://[your_domain].imgix.net/[image] . لا تتضمن أي معلمات.
مطلوب فقط عند استخدام المسارات الجزئية مثل src Prop لمكون. IE ، إذا كان src هو "/images/myImage.jpg" ، فيجب تحديد domain .
على سبيل المثال :
< Imgix domain = "assets.imgix.net" src = "/examples/pione.jpg" > Imgix params لإضافتها إلى الصورة src .
على سبيل المثال :
< Imgix imgixParams = { { mask : "ellipse" } } /> حدد الحجم المتوقع للمطور لعنصر الصورة عند تقديمه على الصفحة. على غرار العرض. EG 100vw ، calc(50vw - 50px) ، 500px . موصى به للغاية عندما لا تمر width أو height . تعمق مقال إريك بورتيس "SRCSET والأحجام" حول كيفية استخدام سمة sizes .
يطبق className على مكون المستوى الأعلى. لتعيين className على الصورة نفسها ، انظر htmlAttributes .
فرض الصور أن تكون ارتفاعًا معينًا.
إجبار الصور على أن تكون عرضًا معينًا.
تعطيل توليد مجموعات SRC العرض المتغير لتمكين الاستجابة.
بشكل افتراضي ، يضيف هذا المكون معلمة إلى عنوان URL الذي تم إنشاؤه للمساعدة في IMGIX مع التحليلات ودعم هذه المكتبة. يمكن تعطيل ذلك عن طريق تعيين هذا الدعامة إلى true .
بشكل افتراضي ، يشفر هذا المكون مسار عنوان URL في SRC و SRCSEST. يمكن تعطيل ذلك عن طريق تعيين هذا الدعامة إلى true . لمزيد من المعلومات حول كيفية عمل ترميز مسار 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 إلى 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 | وصف |
|---|---|
| احتياطي | يتم تشغيله عندما لا يكون هناك <img> أو <Imgix> في نهاية الأطفال عند استخدام <Picture> . تعتبر الصورة الاحتياطية أمرًا بالغ الأهمية لضمان تقدم الصورة بشكل صحيح عندما لا يتمكن المتصفح من مطابقة المصادر المقدمة |
| أحجام | تتطلب هذه المكتبة تمرير sizes الدعامة بحيث يمكن للصور تقديمها بشكل مستجيب. هذا يجب أن ينطفئ فقط في ظروف خاصة جدا. |
| invalidarformat | التحذيرات التي تم إلقاؤها عندما لا يتم تمرير المعلمة ar IMGIX بالتنسيق الصحيح ( w:h ) |
| حجم كبير | يحدث خطأ في وقت التشغيل عندما يتم تحميل الصورة بحجم داخلي أكبر بكثير من الحجم المقدم. |
| Lazylcp | يتم تشغيل خطأ في وقت التشغيل عندما يتم اكتشاف صورة لتكون عنصر LCP ولكن يتم تحميلها باستخدام loading="lazy" . |
يجلب هذا الإصدار واجهة برمجة تطبيقات 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= قيمة الارتفاع 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 جديدة بالنسبة لك (أو حتى إذا لم تكن كذلك) ، يوصى بشدة بمقالة إريك SEMINAL حول 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 Props.
إعادة تسمية generateSrcSet إلى disableSrcSet وعكس القيمة التي تم تمريرها كقيمة الدعامة. ie generateSrcSet={false} يصبح disableSrcSet={true} أو ببساطة disableSrcSet
إذا كانت هناك حاجة إلى دعم للمتصفح الذي لا يدعم الاستخدام الجديد لـ SRCSEST (مثل IE 11) ، فقد أوصنا بإضافة Polyfill ، مثل ملف الصورة الرائع.
srcset أو sizes أو picture ستتراجع بأمان إلى img src الافتراضي عند الاقتضاء. إذا كنت ترغب في توفير تجربة مستجيبة بالكامل لهذه المتصفحات ، فإن React-Imgix يعمل بشكل رائع إلى جانب Picturefill!أصبح دعم المتصفح هذا ممكنًا من خلال الدعم الكبير من Browserstack.
شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):
فريدريك فوجيرتي ؟ | شيروينسكي ؟ | جيسون إيبرل ؟ | بول سترو ؟ | كيلي سوتون ؟ | ريتشارد بليس | إريك كوسلو |
بالدور هيلجاسون | جوناثان شاتز | ثيو | Tanner arist ؟ | نيكولاس سوسكي | التكلفة | كريج كوتشيس |
دينيس شاف | أندي كينت | غابي لوش | ستيفن كوك ؟ | يوجين ناغورني | صموئيل جايلز | إسبن هوفيلاندسدال |
دانييل فاريل | لويز فرناندو دا سيلفا سيسلاك | نيك غوتليب | بيير غريمود | لويس هـ. بول جونيور |
يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب ، ولكن يرجى مراجعة إرشادات المساهمة قبل البدء!
تم إنشاء React-IMGIX في الأصل بواسطة Frederick Fogerty. إنه مرخص بموجب ترخيص ISC (انظر ملف الترخيص لمزيد من المعلومات).
