Einstellen eines backgroundImage mit React Inline Styles

Question

Ich versuche, auf ein statisches Bild zuzugreifen, das innerhalb einer Inline-backgroundImage-Eigenschaft in React verwendet werden soll. Leider bin ich trocken gelaufen, wie das geht.

Im Allgemeinen Ich dachte, du hast nur wie folgt:

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> 
    ); 
    } 
} 

Diese für <img> Tags funktioniert. Kann jemand den Unterschied zwischen den beiden erklären?

Beispiel:

<img src={ Background } /> funktioniert gut.

Vielen Dank!

Answer 1

Die geschweiften Klammern in der backgroundImage-Eigenschaft sind falsch.

Wahrscheinlich verwenden Sie webpack zusammen mit Bilddateien Loader, so sollte Hintergrund sein bereits ein String: backgroundImage: "url(" + Background + ")"

Sie verwenden auch ES6 Ketten-Templates, wie unten die gleiche Wirkung zu erzielen:

backgroundImage: `url(${Background})` 

Answer 2

Sie können das Bild auch mithilfe der Funktion require() in die Komponente bringen.

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

** die beiden Sätze von geschweiften Klammern Hinweis.