ローカル画像が React アプリに読み込まれないのはなぜですか?

ローカル画像が React アプリに読み込まれない

React では、外部画像はロードできるのにローカル画像がロードできないという問題がよく発生します。この問題は、フロントエンド コードを最適化してパッケージ化するバンドラーである Webpack を使用するときに発生する可能性があります。

問題の理解

Webpack には、画像などのアセットが含まれています。同梱されたコード。デフォルトでは、明示的に含めないローカル イメージは認識されません。これは、Webpack が画像をモジュールとしてインポートし、画像の処理と最適化を可能にすることを想定しているためです。

解決策: ローカル イメージが必要

この問題を解決するには、以下が必要です。 React コンポーネントでローカル イメージを必要とする場合。次の部分を次のように置き換えます:

<img src={"/images/resto.png"} />

<img src={require('/images/resto.png')} />

画像を要求することで、画像を明示的に Webpack バンドルに含めることで、ソース パスを処理して正しいバンドルに置き換えることができます。資産。このようにして、React はコンパイルされたコードからローカル イメージを正常にロードできます。

この変更を行うことで、React アプリケーションにローカル イメージを問題なくロードできるようになります。

以上がローカル画像が React アプリに読み込まれないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。