React-Inline-Stile zum Einstellen des Hintergrundbildes verwenden

1. Verwenden von Inline-Stilen zum Festlegen des Hintergrundbilds in React
2. Verwenden von Inline-Stilen zum Festlegen des lokalen Bilds als Hintergrund in React

Beim Erstellen komplexer Webanwendungen müssen Entwickler häufig ein benutzerdefiniertes Hintergrundbild festlegen. Der Standardansatz ist die Verwendung von CSS und HTML.

Bei der Entwicklung von React-Anwendungen haben Sie viele Möglichkeiten, ein Hintergrundbild einzustellen. Sie können normale CSS-Dateien verwenden oder CSS-in-JS-Lösungen wie Inline-Stile in React verwenden.

Verwenden von Inline-Stilen zum Festlegen des Hintergrundbilds in React

Mit Inline-Stilen können Sie die Stile von HTML- oder React-Komponenten in JavaScript-Dateien konfigurieren. Hier ist ein Beispiel für das Festlegen eines Hintergrundbilds in der React-Klassenkomponente:

class App extends Component {
  render() {
    const containerStyle = {
      backgroundImage:
        "url(https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg)",
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

HTML vs. JSX

Wie HTML verwenden wir in JSX das Attribut style des Containers, um Inline-Stile zu definieren. Im Gegensatz zu HTML können wir seinen Wert jedoch nicht auf einen einfachen Text setzen. Stattdessen verwenden wir geschweifte Klammern, um eine JavaScript-Variable namens containerStyle zu übergeben. Diese Variable ist im Wesentlichen ein Objekt, das Schlüssel-Wert-Paare von CSS-Eigenschaften und ihre entsprechenden Werte enthält.

Ein wichtiger Unterschied besteht darin, dass die Schlüssel für ein Stil-Objekt keine Leerzeichen oder andere nicht-alphanumerische Symbole enthalten dürfen. In regulärem CSS wäre die Eigenschaft als background-image definiert, aber in JavaScript wird sie zur backgroundImage-Eigenschaft eines style-Objekts.

Ein weiterer Vorteil der Verwendung von CSS-in-JS-Lösungen besteht darin, dass Ihre Stildefinitionen Variablenreferenzen enthalten können. Dies wird durch die Verwendung von Vorlagenliteralen erreicht. Hier ist ein Beispiel:

class App extends Component {
  render() {
    const backgroundImageURL =
      "https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg";
    const containerStyle = {
      backgroundImage:
        `url(${backgroundImageURL})`,
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

In diesem Fall spiegeln die Stile die Änderungen an der Variablen wider.

Verwenden von Inline-Stilen zum Festlegen des lokalen Bilds als Hintergrund in React

Wenn Sie ein Bild aus dem lokalen Ordner assets verwenden möchten, können Sie es mit einer import-Anweisung oder der Methode require() laden. Das Laden von Images funktioniert jedoch nur, wenn Ihre Entwicklungsumgebung Webpack enthält.

Unabhängig davon, wie Sie Ihr Bild in die App laden möchten, müssen Sie den relativen Pfad angeben:

import image from "./assets/filename.jpg"

Dieser relative Pfad geht davon aus, dass sich sowohl der Komponenten- als auch der Asset-Ordner im Ordner src befinden.

Nachdem Sie ein Bild importiert haben, können Sie es mit dem Namen des Imports (in diesem Fall image) wie auf eine Variable referenzieren. Jedes Bild, das Sie in Ihrer App verwenden, muss separat importiert werden, Ihr Hintergrundbild muss jedoch nur einmal importiert werden.

Sie können auch eine separate Variable erstellen und sie verwenden, um den mit der Methode require() geladenen Bildwert zu speichern:

const image = require("./assets/filename.jpg")

Das Laden von Bildern und das Vergeben eines Variablennamens ist besser lesbar und gibt Ihnen die Freiheit, bei Bedarf Änderungen vorzunehmen.