Gatsby: هل تعمل [gatsby-image] مع صور الخلفية؟

من الرائع سماع أنه يعمل بشكل جيد بالنسبة لك!

على صور الخلفية ، تحقق من موقع gatsby-image التجريبي https://using-gatsby-image.gatsbyjs.org/

هل هذا ما تريده؟

شكرا على الرد السريع!

فقط للتأكد من فهمي لما يحدث على موقع gatsby-image التجريبي ...

1. بدلاً من استخدام background-image ، تستخدم صورة gatsby دائمًا <img /> ويتم محاكاة صور الخلفية باستخدام position: absolute; ؟
2. بدلاً من استخدام background-size/background-position لوضع الصور ، تستخدم gatsby-image دائمًا object-fit/object-position ؟

يسعدني تمامًا استخدام gatsby-image بهذه الطريقة لجميع صوري طالما أنها تُعرض بشكل صحيح في جميع المتصفحات الحديثة ... هل يتضمن Gatsby تدابير لدعم خصائص الكائن / موضع الكائن في IE 11 و Edge ( راجع مشكلات دعم المتصفح هنا: caniuse.com )؟

إذا كان الأمر كذلك ، فهل توصي بتجنب صور خلفية CSS تمامًا (للاستفادة من المعالجة التلقائية للصور في Gatsby)؟ باستخدام gatsby-image ، هل هناك طريقة موصى بها لضبط خصائص ملاءمة الكائن / موضع الكائن؟

إذا لم يكن الأمر كذلك ، فهل هناك طريقة موصى بها عبر المستعرضات لاستخدام صور الخلفية مع background-size:cover في Gatsby؟

ooloth ، المكون جديد جدًا ، لذا فإن إجابتي على سؤالك هي ... يرجى التلاعب باستخدام صورة gatsby كما تريد والإبلاغ عما تجده :-)

تمثل صور الخلفية css مشكلة لأنها لا تسمح لك (بسهولة) بإضافة أحجام مصغرة متعددة للأجهزة ذات الأحجام المختلفة. لكن يمكنك حل هذه المشكلة مع الاستفسارات الإعلامية.

هاها. مفهوم. وسوف تفعل. شكرا لمساعدتك!

إذا أراد أي شخص آخر مشاركة أفضل ممارساته فيما يلي ، فسأكون مهتمًا جدًا:

1. كيفية دعم object-fit/object-position في IE 11 و Edge (هل غاتسبي يفعل ذلك بالفعل؟)
2. كيفية تعديل قيم object-fit/object-position ؟

بخصوص 1. ، ألق نظرة على https://github.com/bfred-it/object-fit-images

fk شكرا على object-fit/object-position ، لكن IE11 لا يزال بحاجة إلى بعض المساعدة.

هل يمكنك تقديم النصيحة بشيء واحد؟ أنا واضح بشأن كيفية تثبيت واستيراد polyfill ...
npm install --save object-fit-images
import objectFitImages from 'object-fit-images'

.. ولكن لست متأكدًا من مكان إجراء مكالمة التنشيط:
objectFitImages()

هل يمكنك أن تنصحني أين تضع هذا الخط؟ أنا جديد بعض الشيء على كل من React و Gatsby.

(راجع للشغل ، لقد اكتشفت كيفية ضبط قيم تناسب الكائن / موضع الكائن وسوف أشارك هذا الرمز بمجرد أن أفرز إضافة polyfill وتعديلات CSS الخاصة به.)

حسنًا ، لقد أجريت بعض التجارب ووجدت حلاً عمليًا لاستخدام صورة gatsby لصور الخلفية. أردت مشاركة هذا مع أي شخص آخر عالق في هذه المشكلة ، لأن ميزات gatsby-image جيدة جدًا لاستخدامها فقط مع الصور المضمنة!

إليك ما نجح معي:

1. أضف نمط CSS

قبل أن نضيف الأنماط ، من الجيد معرفة أن مكون gatsby-image ينتج HTML التالي:

<div class="gatsby-image-outer-wrapper">
  <div class="gatsby-image-wrapper">
    <div></div>
    <!-- Placeholder (hidden after main image loads) -->
    <img style="...object-fit: cover; object-position: center center;">
    <!-- Main image -->
    <img style="...object-fit: cover; object-position: center center;">
  </div>
</div>

سيتم تطبيق الأنماط التي تم تعيينها مباشرة على gatsby-image على <div class="gatsby-image-wrapper> . الأنماط التي نريد تطبيقها على الصورة نفسها تحتاج إلى استخدام محدد فرعي لاستهداف علامات <img> .

لجعل صورة gatsby تتصرف كصورة خلفية CSS ، أضف الأنماط التالية (لقد استخدمت مكونات gatsby-style-style هنا):

import React from 'react'
import Image from 'gatsby-image'
import styled from 'styled-components'

const BgImage = styled(Image)`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 100vh; // or whatever

  // Adjust image positioning (if image covers area with defined height) and add font-family for polyfill
  & > img {
    object-fit: cover !important; // or whatever
    object-position: 0% 0% !important; // or whatever
    font-family: 'object-fit: cover !important; object-position: 0% 0% !important;' // needed for IE9+ polyfill
  }
`

export default BgImage

إليك نسخة من نفس المكون BgImage الذي يستخدم الخاصيات لتعيين القيم الديناميكية:

import React from 'react'
import Image from 'gatsby-image'
import styled from 'styled-components'

const BgImage = styled(Image)`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: ${props => props.height || 'auto'};

  // Adjust image positioning (if image covers area with defined height) and add font-family for polyfill
  & > img {
    object-fit: ${props => props.fit || 'cover'} !important;
    object-position: ${props => props.position || '50% 50%'} !important;
    font-family: 'object-fit: ${props => props.fit || 'cover'} !important; object-position: ${props => props.position || '50% 50%'} !important;'
  }
`

export default BgImage

استخدام !important هنا ليس مثاليًا ، ولكنه ضروري لتجاوز أنماط object-fit/object-position المضمنة.

لاحظ أن خصائص object-fit و object-position لن تحتاج إلى تعديل إلا إذا كانت صورة gatsby تغطي مساحة بارتفاع محدد. بالنسبة لحالات الاستخدام هذه ، لا يزال object-fit: cover; يعمل معي عادةً وأحتاج فقط إلى تعديل قيمة object-position (تعيّنها gatsby-image على center center افتراضيًا).

2. أضف IE9 + Polyfill لملاءمة الكائن / موضع الكائن

ستعمل الأنماط المذكورة أعلاه في جميع المتصفحات باستثناء IE (راجع caniuse.com: object-fit / object-position ). لسوء الحظ ، في IE ، لا يعمل object-fit/object-position ، وأي صورة خلفية ذات ارتفاع محدد ستمتد لملء الحاوية الخاصة بها ، مما يؤدي إلى تشويه الصورة.

لحسن الحظ ، هناك polyfill يعمل على إصلاح هذا في IE9 + ، والذي يمكنك العثور عليه هنا . (شكرًا لـ fk لتوضيح ذلك.)

إليك كيفية تنفيذ polyfill:

1. تأكد من تضمين الإعلان الإضافي font-family في CSS الخاص بك (انظر أعلاه)
2. قم بتثبيت polyfill في مشروعك: npm install —save object-fit-images
3. قم بإنشاء ملف gatsby-browser.js في جذر مشروعك
4. أضف ما يلي إلى gatsby-browser.js :

import objectFitImages from 'object-fit-images'

exports.onInitialClientRender = () => {
  objectFitImages()
}

ملاحظة: لقد قمت بتنشيط polyfill في onInitialClientRender لأن تعليمات polyfill هي إجراء استدعاء التنشيط "قبل </body> ، أو _ on DOM جاهز_". في مكان آخر ، رأيت KyleAMathews يوصي onClientEntry بدلاً من ذلك ، لذلك لست متأكدًا مما إذا كان ذلك سيكون أفضل (أي تعليق ، Kyle؟).

امل ان يساعد!

آسف لعنة ، آسف لعدم العودة في وقت سابقooloth! سعيد لأنك فهمت ذلك!
شكرا لك على العودة وكتابة النتائج الخاصة بك! 👍 ❤️

من دواعي سروري!

واجهstolinski نفس المشكلة في إحدى دروسه التعليمية. يتعامل معها بطريقة مختلفة:
https://www.youtube.com/watch؟v=zhM6C0P7VO0

<Img
  sizes={dataSizes}
  style={{
    position: "absolute",
    left: 0,
    top: 0,
    width: "100%",
    height: "100%"
  }}
/>

اكثر سهولة! شكرا @ grod220.

@ grod220 كان ذلك سهلا ... شكرا 😄

enten سيعمل ذلك ، gatsby-image لتقديم نسخة بحجم مناسب من الصورة في كل حجم منفذ عرض عبر srcset و sizes سمات

بالنسبة لي ، فإن القدرة على استخدام gatsby-image لتسليم النسخة المثلى من كل صورة بسهولة هي أفضل ميزة لـ Gatsby. لا تتوفر هذه المزايا عند استخدام صور خلفية CSS.

ooloth شكرا لتغطية هذا. غاتسبي مبتدئ هنا. في تعليماتك مع التصميم ، أين الصورة الفعلية المذكورة؟

@ fucata55 يسعدني!

الصورة الفعلية هي شيء تستفسر عنه أولاً عبر الرسم البياني ، ثم تنتقل كدعم إلى gatsby-image الخاص بك fluid أو fixed prop (أو إذا كنت تستخدم v1 ، فهي sizes أو resolutions prop).

سيقوم المكون gatsby-image بعد ذلك بإنشاء جميع نسخ الصورة التي ستحتاجها أيضًا وإضافة السمة sizes المعقدة إلى <img /> في HTML الناتج من أجلك.

للحصول على إرشادات حول كيفية استخدام gatsby-image (وإرسال صورة إليه) ، راجع مستندات gatsby-image هنا للإصدار 2 أو هنا للإصدار 1 (إنها رائعة).

ooloth لقد كان عملك مفيدًا جدًا. شكرا لك.

هل يمكن استخدام "مرفق الخلفية: ثابت ؛"؟ إذا كان الأمر كذلك ، أين بالضبط. يمكنني تشغيله ولكن ليس مع رحلات السفاري. عندما أجعلها تعمل ، يكون السلوك هو أن الصورة تبدو جيدة حتى أقوم بإضافة المزيد من المكونات في الصفحة. كلما تمت إضافة المزيد من المكونات ، زادت الصورة. لذا ، فأنا أقوم بالتعويض عن مشكلة رحلات السفاري ولكن لم يعد "مرفق الخلفية: ثابت" خيارًا ، أو هكذا يبدو. أي مساعدة موضع تقدير كبير.

zachgaskin أتمنى أن أتمكن من المساعدة!

يبدو هذا وكأنه من المحتمل أن يكون مشكلة في CSS (على سبيل المثال لا تتعلق بـ Gatsby أو gatsby-image ) وأخشى أنه ليس لدي خبرة كبيرة في استخدام background-attachment: fixed ولم أواجه المشكلة التي تواجهها ' إعادة وصف. إذا كنت قادرًا على نشر رابط إلى الحد الأدنى من إعادة إنتاج هذه المشكلة ، فسيسعدني أن ألقي نظرة ، على الرغم من ذلك.

وفقًا لموقع caniuse.com ، لا يدعم iOS Safari background-attachment: fixed ، ولكن يجب أن يعمل macOS Safari (يجب ...).

قد يكون من الصعب تحديد سبب تعامل بعض المتصفحات مع CSS بشكل مختلف ، لذلك لديك تعاطفي. حظا طيبا وفقك الله!

zachgaskinooloth جئت عبر هذا أيضا. إنه ليس مثاليًا ولكن الحل الذي توصلت إليه هو إضافة position: 'fixed' إلى الصورة. على الرغم من أن هذا يعني أنه موجود في خلفية الصفحة بأكملها. تحتاج إلى التأكد من أن لديك خلفية محددة في كل مكان آخر. سيتأكد z-index: -1 من إخفائه خلف الخلفيات الأخرى.

<Img
  sizes={dataSizes}
  style={{
    position: "fixed",
    left: 0,
    top: 0,
    width: "100%",
    height: "100%",
    z-index: -1
  }}
/>

صورة خلفية غاتسبي خطوة للأمام ...

قد تجد أنه من المفيد استيراد صورة gatsby مباشرة باستخدام IE polyfill وتطبيق objectFit و objectPosition عليها كدعامات ، بدلاً من استخدام! مهم في أنماطك

import Img from 'gatsby-image/withIEPolyfill'

<Img
      fixed={heroImage.childImageSharp.fixed}
      style={{ width: '100%', height: '100%' }}
      objectFit="cover"
      objectPosition="bottom left"
   />

شكرا لك AronBe

أنا لا أعمل مع غاتسبي في الوقت الحالي ، لذا لا أعرف آخرها ؛ ومع ذلك ، فإن صورة خلفية Gatsby (المذكورة أعلاه) قد فعلت بالفعل الحيلة بالنسبة لي في مشروعي الأخير.