ホームページ > ウェブフロントエンド > jsチュートリアル > React で BackgroundImage スタイリングのために静的画像を正しく参照するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-10-17 21:02:29
オリジナル
695 人が閲覧しました

How to Correctly Reference Static Images for BackgroundImage Styling in React?

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 サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート