React インライン スタイルで背景画像を設定する: インライン画像とインライン背景画像の違いを理解する

React を使用する場合、インライン スタイルを使用するヒンターグルンズ ビルドは簡単そうに見えますが、インライン タグの使用と、backgroundImage プロパティを使用して背景画像を設定することの間には、いくつかの重要な違いがあります。

インライン イメージについて

インライン タグを使用すると、画像を表示する簡単で簡単な方法です。 src 属性に画像のパスを設定すると、画像を直接読み込んで表示します。

設定インライン スタイルを使用した背景画像

インライン スタイルを使用して背景画像を設定するには、backgroundImage プロパティを使用し、画像 URL を値として指定する必要があります。ここでの主な違いは、backgroundImage プロパティが JavaScript 変数や式ではなく、URL を含む文字列を想定していることです。

正しい構文:

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

この例では、webpack やその画像ファイル ローダーなどのツールのおかげで、Background 変数はすでに画像へのパスを含む文字列になっています。

間違った構文:

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

間違った構文では { Background } の周りに中かっこが使用されていますが、これは必要ではないため、エラーが発生する可能性があります。

ES6 文字列テンプレートの使用

文字列連結を使用する代わりに、ES6 文字列テンプレートを使用することもできます。これにより、よりクリーンで簡潔な構文が可能になります:

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

これらの違いを理解することで、React のインライン スタイルを使用して背景画像を効果的に設定でき、アプリケーションで画像が正しく表示されるようになります。