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

React アプリケーションでローカル イメージの読み込みに失敗する

React アプリケーションを開発すると、ローカルに保存されたイメージが表示されないという問題が発生する場合があります。外部でホストされている画像 (placehold.it/200x200 など) のレンダリングに成功したにもかかわらず、ローカル画像は依然としてとらえどころがありません。これを解決するには、サーバー構成を詳しく調べることが重要です。

アプリケーション コードの検査

App.js、index.js、サーバー用に提供されたコード。 js は標準的なもので、明らかな異常はありません。ただし、App.js 内の画像ソースを調査すると、問題の根本が明らかになります。

<img  src="%7B%22/images/resto.png%22%7D" alt="ローカル画像が React アプリケーションに読み込まれないのはなぜですか?" >

Webpack の解決策

Webpack を利用する場合、ユーザー定義の画像は次のとおりです。ツールがそれらを処理するには明示的に必要です。現在の使用法では、Webpack が「/images」ディレクトリ内の画像を見つけて表示する必要があります。この手順を行わないと、Webpack はローカル イメージを無視するため、アプリケーションからローカル イメージが失われます。

必要な変更

問題を修正するには、現在のイメージ ソースを次の構文:

<img  src="%7Brequire('/images/resto.png')%7D" alt="ローカル画像が React アプリケーションに読み込まれないのはなぜですか?" >

画像を要求することで、Webpack は App.js 内の元のソースを処理して正しい画像に置き換えることができるようになり、ローカル画像を意図したとおりに表示できるようになります。

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