Gatsby: क्या [gatsby-image] बैकग्राउंड इमेज के साथ काम करता है?

यह सुनकर बहुत अच्छा लगा कि यह आपके लिए अच्छा काम कर रहा है!

बैकग्राउंड इमेज पर, गैट्सबी-इमेज डेमो साइट https://using-gatsby-image.gatsbyjs.org/ देखें।

क्या यही तुम चाहते हो?

जल्दी उत्तर के लिए धन्यवाद!

बस यह सुनिश्चित करने के लिए कि मैं समझता हूं कि गैट्सबी-इमेज डेमो साइट पर क्या हो रहा है...

1. background-image का उपयोग करने के बजाय, gatsby-image हमेशा <img /> का उपयोग करता है और पृष्ठभूमि छवियों को position: absolute; का उपयोग करके सिम्युलेटेड किया जाता है?
2. छवियों को स्थान देने के लिए background-size/background-position का उपयोग करने के बजाय, gatsby-image हमेशा object-fit/object-position का उपयोग करता है?

मैं अपनी सभी छवियों के लिए इस तरह से गैट्सबी-इमेज का उपयोग करने के लिए पूरी तरह से खुश हूं, जब तक कि वे सभी आधुनिक ब्राउज़रों में ठीक से प्रदर्शित होते हैं ... क्या गैट्सबी में आईई 11 और एज में ऑब्जेक्ट-फिट/ऑब्जेक्ट-पोजिशन गुणों का समर्थन करने के उपाय शामिल हैं ( ब्राउज़र समर्थन मुद्दे यहाँ देखें: caniuse.com )?

यदि हां, तो क्या आप अनुशंसा करेंगे कि हम केवल सीएसएस पृष्ठभूमि छवियों से पूरी तरह बचें (गैट्सबी की स्वचालित छवि प्रसंस्करण का लाभ उठाने के लिए)? गैट्सबी-इमेज का उपयोग करते हुए, क्या ऑब्जेक्ट-फिट/ऑब्जेक्ट-पोजिशन गुणों को समायोजित करने के लिए एक अनुशंसित दृष्टिकोण है?

यदि नहीं, तो क्या Gatsby में background-size:cover साथ पृष्ठभूमि छवियों का उपयोग करने के लिए एक अनुशंसित, क्रॉस-ब्राउज़र तरीका है?

@ooloth घटक बहुत नया है इसलिए आपके प्रश्न का मेरा उत्तर है ... कृपया गैट्सबी-इमेज का उपयोग करके खेलें जैसा आप चाहते हैं और जो आपको मिलता है उसे वापस रिपोर्ट करें :-)

सीएसएस पृष्ठभूमि छवियां समस्याग्रस्त हैं क्योंकि वे आपको (आसानी से) विभिन्न आकार के उपकरणों के लिए एकाधिक थंबनेल आकार जोड़ने की अनुमति नहीं देती हैं। लेकिन आप मीडिया के सवालों से इसका समाधान निकाल सकते हैं।

हाहा। समझा। और करेंगे। आपकी सहायताके लिए धन्यवाद!

अगर कोई और निम्नलिखित के लिए अपनी सर्वोत्तम प्रथाओं को साझा करना चाहता है, तो मुझे बहुत दिलचस्पी होगी:

1. IE 11 और Edge में object-fit/object-position का समर्थन कैसे करें (क्या Gatsby पहले से ऐसा करता है?)
2. object-fit/object-position मानों में बदलाव कैसे करें?

1 के बारे में, https://github.com/bfred-it/object-fit-images पर एक नज़र डालें

@fk पॉलीफिल के लिए धन्यवाद! 16 अक्टूबर तक, एज object-fit/object-position का समर्थन करता है, लेकिन IE11 को अभी भी कुछ मदद की जरूरत है।

क्या आप कृपया एक बात पर सलाह दे सकते हैं? मैं इस बारे में स्पष्ट हूं कि पॉलीफिल को कैसे स्थापित और आयात किया जाए ...
npm install --save object-fit-images
import objectFitImages from 'object-fit-images'

..लेकिन मुझे यकीन नहीं है कि सक्रियण कॉल कहां रखा जाए:
objectFitImages()

क्या आप कृपया सुझाव दे सकते हैं कि इस लाइन को कहाँ रखा जाए? मैं रिएक्ट और गैट्सबी दोनों के लिए थोड़ा नया हूँ।

(बीटीडब्ल्यू, मुझे पता चला है कि ऑब्जेक्ट-फिट/ऑब्जेक्ट-पोजिशन मानों को कैसे समायोजित किया जाए और जैसे ही मैंने पॉलीफिल और उसके सीएसएस समायोजन को जोड़ने का काम किया है, उस कोड को साझा करूंगा।)

ठीक है, मैंने कुछ प्रयोग किए हैं और पृष्ठभूमि छवियों के लिए गैट्सबी-इमेज का उपयोग करने के लिए एक कार्यशील समाधान ढूंढ लिया है। मैं इसे इस मुद्दे पर अटके हुए किसी और के साथ साझा करना चाहता था, क्योंकि गैट्सबी-इमेज की विशेषताएं केवल इनलाइन छवियों के लिए उपयोग करने के लिए बहुत अच्छी हैं!

यहाँ मेरे लिए क्या काम किया है:

1. सीएसएस स्टाइलिंग जोड़ें

शैलियों को जोड़ने से पहले, यह जानना अच्छा है कि गैट्सबी-इमेज घटक निम्नलिखित 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>

सीधे गैट्सबी-इमेज पर सेट की गई शैलियाँ <div class="gatsby-image-wrapper> लागू होंगी। जिन शैलियों को हम छवि पर लागू करना चाहते हैं, उन्हें <img> टैग को लक्षित करने के लिए एक बाल चयनकर्ता का उपयोग करने की आवश्यकता है।

गैट्सबी-इमेज को सीएसएस बैकग्राउंड इमेज की तरह बनाने के लिए, निम्नलिखित शैलियों को जोड़ें (मैंने यहां गैट्सबी-प्लगइन-स्टाइल-घटकों का उपयोग किया है):

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 गुणों को तब तक समायोजित करने की आवश्यकता नहीं होगी जब तक कि गैट्सबी-इमेज एक निर्धारित ऊंचाई वाले क्षेत्र को कवर न करे। इन उपयोग के मामलों के लिए, object-fit: cover; आमतौर पर अभी भी मेरे लिए काम करता है और मुझे केवल object-position मान को ट्विक करने की आवश्यकता है (gatsby-image इसे डिफ़ॉल्ट रूप से center center सेट करता है)।

2. ऑब्जेक्ट-फिट/ऑब्जेक्ट-पोजिशन के लिए IE9+ पॉलीफ़िल जोड़ें

ऊपर दी गई शैलियाँ IE को छोड़कर सभी ब्राउज़रों में काम करेंगी (देखें caniuse.com: object-fit/object-position )। दुर्भाग्य से, IE में, object-fit/object-position काम नहीं करता है, और एक सेट ऊंचाई वाली कोई भी पृष्ठभूमि-छवि छवि को विकृत करते हुए, इसके कंटेनर को भरने के लिए फैल जाएगी।

सौभाग्य से, एक पॉलीफ़िल है जो इसे IE9+ में ठीक करता है, जिसे आप यहाँ पा सकते हैं। (इसे इंगित करने के लिए @fk को धन्यवाद।)

पॉलीफ़िल को लागू करने का तरीका यहां दिया गया है:

1. सुनिश्चित करें कि आपने अपने CSS में अतिरिक्त font-family घोषणा शामिल की है (ऊपर देखें)
2. अपने प्रोजेक्ट में पॉलीफ़िल स्थापित करें: npm install —save object-fit-images
3. अपने प्रोजेक्ट की जड़ में एक gatsby-browser.js फ़ाइल बनाएँ
4. निम्नलिखित को gatsby-browser.js :

import objectFitImages from 'object-fit-images'

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

नोट: मैंने पॉलीफ़िल को onInitialClientRender में सक्रिय किया है क्योंकि पॉलीफ़िल के निर्देश सक्रियण कॉल को " </body> , या _on DOM तैयार_" पर रखने के लिए हैं। कहीं और, मैंने देखा है @KyleAMathews अनुशंसा करते हैं कि onClientEntry में लागू किया जाए, इसलिए मुझे यकीन नहीं है कि यह बेहतर होगा (कोई टिप्पणी, काइल?)

उम्मीद है की वो मदद करदे!

अर्घ धिक्कार है, पहले वापस नहीं आने के लिए खेद है @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 यह काम करेगा, लेकिन आप srcset और sizes माध्यम से प्रत्येक व्यूपोर्ट आकार में छवि के उचित आकार के संस्करण को वितरित करने के लिए gatsby-image का उपयोग करने के प्रदर्शन लाभों से चूक जाएंगे। sizes विशेषताएँ।

मेरे लिए, प्रत्येक छवि की इष्टतम प्रतिलिपि को आसानी से वितरित करने के लिए gatsby-image का उपयोग करने की क्षमता Gatsby की सबसे अच्छी विशेषता है। जब आप CSS पृष्ठभूमि छवियों का उपयोग करते हैं तो वे लाभ उपलब्ध नहीं होते हैं।

@oolot इसे कवर करने के लिए धन्यवाद। गैट्सबी नौसिखिया यहाँ। स्टाइल के साथ आपके निर्देशों में, वास्तविक छवि का उल्लेख कहां है?

@ fucata55 मेरी खुशी!

वास्तविक छवि कुछ ऐसी है जिसे आप पहले ग्राफ़िकल के माध्यम से पूछते हैं और फिर अपने gatsby-image घटक के fluid या fixed प्रोप (या यदि v1 का उपयोग कर रहे हैं, तो इसका sizes या resolutions प्रोप)।

तब gatsby-image घटक उस छवि की सभी प्रतियाँ उत्पन्न करेगा जिसकी आपको आवश्यकता होगी और आपके लिए परिणामी HTML में <img /> में जटिल sizes विशेषता जोड़ देगा।

gatsby-image (और इसे एक छवि भेजें) का उपयोग करने के तरीके के बारे में एक पूर्वाभ्यास के लिए, gatsby-image डॉक्स यहां v2 के लिए या यहां v1 के लिए देखें (वे महान हैं)।

@oolot आपका काम बहुत मददगार रहा है। धन्यवाद।

क्या "पृष्ठभूमि-अनुलग्नक: निश्चित;" का उपयोग करना संभव है? यदि हां, तो वास्तव में कहां। मैं इसे काम कर सकता हूं लेकिन सफारी के साथ नहीं। जब मैं इसे काम करता हूं तो व्यवहार यह होता है कि जब तक मैं पृष्ठ में और घटक नहीं जोड़ता तब तक छवि अच्छी लगती है। जितने अधिक घटक जोड़े जाते हैं, चित्र उतना ही बड़ा होता जाता है। तो, फिर मैं सफारी मुद्दे के लिए पॉलीफिल करता हूं लेकिन फिर "पृष्ठभूमि-अनुलग्नक: निश्चित;" अब कोई विकल्प नहीं है, या ऐसा लगता है। किसी भी मदद की बहुत सराहना की।

@zachgaskin काश मैं मदद कर पाता!

ऐसा लगता है कि यह शायद एक CSS मुद्दा है (अर्थात Gatsby या gatsby-image से संबंधित नहीं है) और मुझे डर है कि मुझे background-attachment: fixed का उपयोग करने का अधिक अनुभव नहीं है और आपने इस समस्या का सामना नहीं किया है। पुन: वर्णन कर रहा है। यदि आप इस मुद्दे के न्यूनतम पुनरुत्पादन के लिए एक लिंक पोस्ट करने में सक्षम हैं, तो मुझे एक नज़र डालने में खुशी होगी।

caniuse.com के अनुसार, आईओएस सफारी background-attachment: fixed समर्थन नहीं करता है, लेकिन मैकोज़ सफारी को काम करना चाहिए (चाहिए ...)।

यह पता लगाना एक वास्तविक दर्द हो सकता है कि कुछ ब्राउज़र एक ही सीएसएस को अलग तरह से क्यों मानते हैं, इसलिए आपको मेरी सहानुभूति है। आपको कामयाबी मिले!

@zachgaskin @ooloth मैं इस पर भी आया हूं। यह आदर्श नहीं है लेकिन मैं जिस समाधान के साथ आया हूं वह छवि में position: 'fixed' जोड़ रहा है। हालांकि, इसका मतलब यह है कि यह पूरे पृष्ठ की पृष्ठभूमि में है। आपको यह सुनिश्चित करने की ज़रूरत है कि आपके पास हर जगह निर्दिष्ट पृष्ठभूमि है। z-index: -1 यह सुनिश्चित करेगा कि यह आपकी अन्य पृष्ठभूमि के पीछे छिपा हुआ है।

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

गैट्सबी बैकग्राउंड इमेज एक कदम आगे है...

आपको आईई पॉलीफिल के साथ सीधे गैट्सबी-इमेज आयात करना उपयोगी हो सकता है और अपनी शैलियों में ! महत्वपूर्ण का उपयोग करने के बजाय ऑब्जेक्टफिट और ऑब्जेक्ट पोजीशन को प्रॉप्स के रूप में लागू करना उपयोगी हो सकता है।

import Img from 'gatsby-image/withIEPolyfill'

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

धन्यवाद, @AronBe

मैं इस समय गैट्सबी के साथ काम नहीं कर रहा हूं, इसलिए मुझे नवीनतम जानकारी नहीं है; हालांकि, गैट्सबी बैकग्राउंड इमेज (ऊपर उल्लिखित) ने वास्तव में मेरे आखिरी प्रोजेक्ट पर मेरे लिए चाल चली।