React で BackgroundImage スタイリングのために静的画像を正しく参照するにはどうすればよいですか?

React での BackgroundImage の静的画像へのアクセス

開発者は、React アプリケーション内でインライン backgroundImage スタイル用の静的画像にアクセスするときに問題が発生する可能性があります。次の一般的な構文アプローチは、インポートされた画像を参照しようとします。

<code class="javascript">import Background from '../images/background_image.png';

const sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};</code>

このアプローチは に対しては問題なく機能します。タグを使用しているため、backgroundImage スタイルに適用すると失敗します。主な相違点は、backgroundImage プロパティ内で中括弧が正しく使用されていないことにあります。

この問題を解決するには、正しい構文で中括弧を省略し、Background が前処理された文字列であることを確認する必要があります (おそらく 3 番目の方法で促進されます)。

<code class="javascript">backgroundImage: "url(" + Background + ")"</code>

また、開発者は ES6 文字列テンプレートを利用して同じ結果を達成することもできます。

<code class="javascript">backgroundImage: `url(${Background})`</code>

これらの変更を実装することで、開発者は次のことが可能になります。 React アプリケーション内で、backgroundImage スタイル用の静的画像を参照します。

以上がReact で BackgroundImage スタイリングのために静的画像を正しく参照するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。