Inline -Hintergrundbilder in React: Das Verständnis der Unterschiede

Bei Verwendung von React können Hintergrundbilder inline mit ein bisschen Finesse erreicht werden. Während der Ansatz der Feststellung einer Bildquelle für ein HTML -Bild -Tag ähnelt, gibt es einen entscheidenden Unterschied.

Die Herausforderung: Hintergrundmaterial mit statischen Bildern

Wenn Sie versuchen, ein Hintergrundbild mit der Inline -Hintergrundeinrichtung zu setzen, nehmen viele Entwickler an, dass es ähnlich wie ein Bild mit einem Bild. "url (" {Hintergrund} ")"

backgroundImage: "url("   { Background }   ")"

Inline-Hintergrundbilder verlangen, dass Sie die einzelnen Quote, nicht doppelte Strings, wie oben gesehen. Zusätzlich müssen Sie die URL in Backticks für die String -Interpolation einschließen.

HintergrundInimage: `url ($ {Hintergrund})`

backgroundImage: `url(${Background})`

Der Unterschied in der Syntax zwischen Bild -Tags und Inline -Hintergrundbildern ergibt sich aus der Art und Weise, wie die Eigenschaften durch React interpretiert werden. Hintergrundbilder werden als CSS -Eigenschaften behandelt, während Bildquellen als HTML -Attribute behandelt werden, was zur Notwendigkeit einer unterschiedlichen Syntax führt.