Webpack と React と ローカル画像

はじめに

create-react-appコマンドで React プロジェクトを作った場合。
以下のコードだとimg.pngが表示されないけど、

App.js

import logo from "./logo.svg";

function App() {
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <img src="./img.png" />
    </div>
  );
}

export default App;

次のコードだと表示されるやつ。

App.js

import logo from "./logo.svg";
import img from "./img.png";

function App() {
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <img src={img} />
    </div>
  );
}

export default App;

build

最初のコードでbuildしたときのディレクトリ構造。
build/static/mediaの中に、img.pngは入ってない。

build
    - static
        - js
        - css
        - media
            - logo.svg

画像が表示される方のコードでbuildしたときのディレクトリ構造。
build/static/mediaにimg.pngが含まれている。

build
    - static
        - js
        - css
        - media
            - logo.svg
            - img.png

Webpack

import img from "./img.png"と書くことで、Webpack に「このファイル使うのでビルドに含めてください」と伝えられる。

ただし使用する画像数が多いと build ファイルが大きくなってしまうので、その場合は画像を public フォルダ内や外部サーバに置いたりする。