React でインライン背景画像を使用する方法: 文字列構文の違いを解明する

React のインライン背景画像: 違いを理解する

React を使用する場合、少し工夫するだけで背景画像をインラインに設定できます。このアプローチは HTML 画像タグの画像ソースの設定に似ていますが、決定的な違いがあります。

課題: 静的画像を使用した BackgroundImage プロパティ

インラインのbackgroundImageプロパティを使用して背景画像を設定します。多くの開発者は、画像タグと同様に実行できると想定しています:

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

ただし、これは背景画像では機能しません。

解決策: バックティック付きの一重引用符文字列

インライン背景画像では、上記のような二重引用符文字列ではなく、一重引用符文字列で URL をラップする必要があります。さらに、文字列補間のために URL をバッククォートで囲む必要があります。

修正されたコード:

backgroundImage: `url(${Background})`

この修正された構文は、背景として静的画像を適切に適用します。

違いは何ですか?

イメージ タグとインライン背景イメージの構文の違いは、React によるプロパティの解釈方法に起因します。背景画像は CSS プロパティとして処理され、画像ソースは HTML 属性として処理されるため、異なる構文が必要になります。

以上がReact でインライン背景画像を使用する方法: 文字列構文の違いを解明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。