Wie setze ich ein Hintergrundbild in reactjs?

Question

Ich habe eine reactjs/webpack App und versuche, ein Hintergrundbild für den bodytag einzustellen:

body{ 
    background: url("../images/some-background.jpg"); 
    background-size:contain; 
    background-position:top; 
    background: cover; 
} 

jedoch nach den Komponenten Laden des Körper Stil nicht vorhanden ist, in dem page.It obwohl in der Konsole erscheint. Gibt es eine Möglichkeit, ein Hintergrundbild auf der Hauptseite anzuzeigen, während die CSS-Regel in der CSS-Datei, die von Webpack geladen wird, enthalten ist, weil reactjs etwas tut, was mir nicht bewusst ist?

Answer 1

Hintergrund sollte bereits ein String:

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

Sie können auch ES6 String-Vorlagen verwenden:

backgroundImage: `url(${Background})` 

sollten Sie dies lesen, es könnte helfen -

https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

Answer 2

Da Sie Webpack verwenden, können Sie Ihr Stylesheet in eine css or scss files schreiben. Es bedeutet, dass Sie es in Ihre app.js importieren. webpack verwendet also sass-loader or css-loader, um Ihre CSS-Dateien zu bündeln, wenn Sie sich in der Entwicklungsumgebung befinden.

So wird es nicht sofort funktionieren, lädt der Browser Ihre bundle.js zuerst, exec js Datei, Stylesheet generieren und sie in die Kopfzeile einfügen.

Wenn Sie sofort arbeiten möchten, sollten Sie Ihr Stylesheet in Ihre HTML-Datei schreiben.

Und denken Sie daran, es braucht auch etwas Zeit, um Ihr Hintergrundbild zu laden.

Answer 3

Here ist eine einfache github-repository, die ich erstellt habe, um Hintergrundbild zu Body-Tag zu setzen. Dieses Beispiel enthält keine Änderungen/Plugins, die speziell für CSS in der Webpack-Konfiguration hinzugefügt wurden.

In Ihrem Code, wenn Sie ähnliche Repository-Struktur wie meine haben, könnte es ein Pfadproblem sein. Hoffe das löst Ihre Anfrage.

Answer 4

Ich hatte immer Probleme, Webpack richtig Hintergrundbilder zu laden. Vielleicht ist es in Webpack 2 behoben, aber ich benutze es noch nicht. Ich bin wieder zurückgegangen, um die copy-webpack-plugin zu verwenden, um Bilder in ein Verzeichnis zu kopieren und dann auf diesen Standort in CSS zu verweisen.

new CopyWebpackPlugin([ 
     { from: './src/images', to: 'images' } 
])