Reactにおける画像の配置と相対パスの扱いについて

1. publicフォルダ内に配置した場合:

   • publicフォルダには、アプリケーションの静的ファイルを配置します。ここに置いた画像は、ビルド時にそのままルートにコピーされます。相対パスを使う場合は、/画像名の形式でアクセスします。
   • 例: public内にlogo.pngがある場合、URLは/logo.pngになります。

2. srcフォルダ内に配置した場合:

   • srcフォルダ内に画像を配置した場合、Webpackなどのモジュールバンドラーが画像を処理します。この場合、画像はインポートする必要があります。相対パスではなく、JavaScriptのimport文を使います。
   • 例: src/images/logo.pngに画像がある場合、次のようにインポートします。

     import logo from './images/logo.png';
     

   • その後、<img src={logo} alt="Logo" />のように使用します。

まとめ

• public: 直接URLでアクセス可能。相対パスはルートから。
• src: インポートして使用。相対パスはモジュールの階層に基づく。