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

React でのローカル イメージのロードの問題を解決する

React を使用する場合、外部イメージがロードされずに表示される一方で、ローカル イメージのロードに失敗するシナリオが発生することがあります。滞り。これは、Webpack での画像処理に関する一般的な誤解が原因である可能性があります。

Webpack は開発プロセスで重要な役割を果たしており、Webpack が画像アセットをどのように処理するかを理解することが不可欠です。外部画像とは異なり、ローカル画像は処理を受けるために Webpack に明示的にインポートする必要があります。この違いはコード内で明らかになります。外部画像「placehold.it/200x200」は正常に読み込まれますが、ローカル画像「/images/resto.png」は非表示のままです。

この問題を修正し、次のことを確認するにはローカル画像が意図したとおりに表示される場合は、現在のソース構文を次のように置き換える必要があります:

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

「require」を含めることによりディレクティブを使用すると、画像を処理してバンドルに含めるように Webpack に明示的に指示します。これにより、Webpack は画像の最適化と置換タスクを実行できるようになり、読み込みの問題が解決されます。ロードする画像ごとに、必ず「resto.png」を適切な画像名に置き換えてください。

この簡単な変更により、ローカル画像が正しく処理され、ロードされるようになり、ユーザー エクスペリエンスが向上します。 React アプリケーション。

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