Ein Hintergrundbild mit React-Inline-Stilen festlegen: Den Unterschied zwischen Inline-Bildern und Inline-Hintergrundbildern verstehen

Wenn Sie mit React arbeiten, legen Sie ein fest Hintergrundbilds mithilfe von Inline-Stilen mögen einfach erscheinen, es gibt jedoch einige wesentliche Unterschiede zwischen der Verwendung eines Inline-Tags und dem Festlegen eines Hintergrundbilds mithilfe von backgroundImage Eigenschaft.

Inline-Bilder verstehen

Die Verwendung eines Inline--Tags ist eine einfache und unkomplizierte Möglichkeit, ein Bild anzuzeigen. Durch Festlegen des src-Attributs auf den Pfad des Bildes wird das Bild direkt geladen und angezeigt.

Einstellung Hintergrundbilder mit Inline-Stilen

Um ein Hintergrundbild mithilfe von Inline-Stilen festzulegen, müssen Sie die Eigenschaft „backgroundImage“ verwenden und die Bild-URL als Wert angeben. Der Hauptunterschied besteht darin, dass die Eigenschaft „backgroundImage“ eine Zeichenfolge mit der URL und keine JavaScript-Variable oder einen JavaScript-Ausdruck erwartet.

Korrekte Syntax:

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

In diesem Beispiel ist die Hintergrundvariable bereits eine Zeichenfolge, die den Pfad zum Bild enthält, dank Tools wie Webpack und seinem Bilddatei-Loader.

Falsche Syntax:

const sectionStyle = {
  backgroundImage: "url("   { Background }   ")", // Incorrect
};

Die falsche Syntax verwendet geschweifte Klammern um { Background }, was nicht notwendig ist und zu Fehlern führen kann.

Verwenden von ES6-String-Vorlagen

Eine Alternative zur Verwendung der String-Verkettung ist die Verwendung von ES6-String-Vorlagen. Dies ermöglicht eine sauberere und prägnantere Syntax:

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

Wenn Sie diese Unterschiede verstehen, können Sie mithilfe von Inline-Stilen in React Hintergrundbilder effektiv festlegen und so sicherstellen, dass Ihre Anwendung Bilder korrekt anzeigt.