एक पृष्ठभूमि की स्थापना के साथ रिएक्ट इनलाइन शैलियों

Question

मैं backgroundImageप्रतिक्रिया के भीतर एक इनलाइन संपत्ति के भीतर उपयोग करने के लिए एक स्थिर छवि का उपयोग करने की कोशिश कर रहा हूं । दुर्भाग्य से, मैं यह करने के लिए कैसे सूखी पर चला गया हूँ।

आम तौर पर, मैंने सोचा था कि आपने इस प्रकार किया:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

यह <img>टैग के लिए काम करता है । क्या कोई दोनों के बीच अंतर बता सकता है?

उदाहरण:

<img src={ Background } /> ठीक काम करता है।

धन्यवाद!

Answer 1

पृष्ठभूमि के अंदर घुंघराले ब्रेसिज़ संपत्ति गलत हैं।

संभवतः आप इमेज फाइल लोडर के साथ वेबपैक का उपयोग कर रहे हैं, इसलिए बैकग्राउंड पहले से ही एक स्ट्रिंग होना चाहिए: backgroundImage: "url(" + Background + ")"

आप समान प्रभाव प्राप्त करने के लिए नीचे ES6 स्ट्रिंग टेम्प्लेट का भी उपयोग कर सकते हैं:

backgroundImage: `url(${Background})`

Comments

मुझे अपने प्रश्न में इसे जोड़ना चाहिए था। मेरे पास एक चौड़ाई और ऊंचाई सेट है (क्रमशः 100% / 400px)। यह समस्या उत्पन्न होने के कारण है कि प्रतिक्रिया कैसे स्थिर छवियों को संभालती है जो मुझे विश्वास है।

— क्रिस

किसी को w3.org/TR/CSS2/syndata.html#value-def-uri ?

— qbolele

पूर्ण वाक्यविन्यास इस तरह दिखना चाहिए:style={{backgroundImage: "url(" + Background + ")"}}

— माइक

सिर्फ @ माइक की टिप्पणी का विस्तार करने के लिए, आपको डबल घुंघराले ब्रेस की आवश्यकता है क्योंकि एक प्रतिक्रिया के लिए प्रवेश करने के लिए है जेएस मोड और एक को नई वस्तु को निरूपित करना है।

— सिप्रियन टोमोयागौ

मुझे त्रुटि मिल रही है 'खंड' को परिभाषित किया गया है, लेकिन कभी भी इसका उपयोग './background.jpg' की पृष्ठभूमि आयात करने के बाद नहीं किया गया है; var सेक्शन्टी = {चौड़ाई: "100%", ऊंचाई: "400px", बैकग्राउंडमैज: url(${Background})}; वर्ग खंड घटक प्रदान करता है {रेंडर () {रिटर्न (<खंड शैली = {अनुभाग शैली}> </ अनुभाग>); }}

— पावन एमएस

Answer 2

यदि आप ES5 का उपयोग कर रहे हैं -

backgroundImage: "url(" + Background + ")"

यदि आप ES6 का उपयोग कर रहे हैं -

backgroundImage: `url(${Background})`

मूल रूप से पृष्ठभूमि को जोड़ते हुए अनावश्यक घुंघराले ब्रेसिज़ को हटा दें।

Comments

मेरे लिए ईएस 6 में ऐसा था backgroundImage: `url("${Background}")`, क्योंकि आपका ईएस 6 उदाहरण मेरे लिए काम नहीं करता था।

— एस ..

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

— सफलता के रास्ते पर

Answer 3

किसी भी छवि को पूर्ण स्क्रीन सेट करने के लिए इनलाइन शैली:

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

Answer 4

आप require()फ़ंक्शन का उपयोग करके छवि को घटक में भी ला सकते हैं ।

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

घुंघराले ब्रैकेट के दो सेटों पर ध्यान दें । पहला सेट प्रतिक्रिया मोड में प्रवेश करने के लिए है और दूसरा ऑब्जेक्ट को चिह्नित करने के लिए है

Comments

क्या होगा यदि छवि पथ स्थानीय पथ के बजाय एक वेब URL है? कुछ इस तरहhttps://images.com/myimage.png

— अमीनु कानो

ठीक है, मैं समझता हूँ, जब वेब-आधारित URL का उपयोग किया जाता है। मुझे बस लिखना चाहिएurl(https://images.com/myimage.png)

— अमीनु कानो

Answer 5

आप टेम्प्लेट लिटरल्स (बैक-टिक के साथ संलग्न: `...`) का उपयोग backgroundImageइस तरह की संपत्ति के लिए कर सकते हैं:

backgroundImage: `url(${Background})`

Answer 6

इसे इस्तेमाल करे:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

Answer 7

मेरे लिए जो काम कर रहा है वह इस तरह है

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

Answer 8

यू कैन यू ट्राई यूजिम

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")

Comments

यह अनुशंसित नहीं है क्योंकि यह एसेट को जानने से वेबपैक को रोक देगा। यह कैश मिस में समाप्त हो जाएगा यदि प्रतिक्रिया ऐप ऑफ़लाइन खोला जाता है।

— थॉमस केकेसेन