रिएक्ट इनलाइन स्टाइल के साथ पृष्ठभूमि इमेज सेट करना

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

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

शायद आप छवि फ़ाइलों लोडर के साथ webpack उपयोग कर रहे हैं, तो पृष्ठभूमि पहले से ही एक स्ट्रिंग होना चाहिए: backgroundImage: "url(" + Background + ")"

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

backgroundImage: `url(${Background})` 

Answer 2

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

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

** कर्ली कोष्ठक के दो सेट पर ध्यान दें।