reactでimgタグを使用して画像を表示する方法について深掘りする

はじめに

reactでimgタグを使用した画像の表示について
毎回ミスしてしまうのでまとめてみました。

やりがちなダメな例

表示したい画像を以下のように配置しているとします。

Appコンポーネントの中で画像を表示させたいのでApp.tsxに以下のように記述しました。

App.tsx

import React from 'react';

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

export default App;

imgタグのsrc属性に、App.tsxファイルからの相対パスを記述しています。
一見これで良さそうですがこれじゃ画像は表示されません。
reactはbuildされると全てのコンポーネントが1つのJSファイルに集約されます。
その状態で../images/koike.png この相対パスを辿っても画像はないので表示されません。

じゃあどうすればいいのか？

上手くいく例①

画像の配置はそのままで
画像ファイルをソースコード内でimportする

App.tsx

import React from 'react';
import koike from '../images/koike.png'

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

この方法だとうまく画像が表示されます。

上手くいく例②

画像を配置する場所を以下のようにpublicフォルダ内に変更します。

imgタグのsrc属性にはpublicフォルダにあるindex.htmlからのパスを入力します。

App.tsx

import React from 'react';

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

どっちで実装したほうがいいの？

それぞれメリデメがあるみたいです。

①の場合
メリット：
ソースコードに画像ファイルが直接埋め込まれるためコードの管理が楽になる。

デメリット：
画像ファイルがimportされるため、画像ファイル自体がbuildされたJSファイルに取り込まれ
サイズが大きくなり、ページの読み込みに時間が掛かる。
画像ファイルがJSファイルに取り込まれるため、ブラウザ側でのキャッシュが期待できない。

②の場合
メリット：
画像ファイルがpublicフォルダに配置されているため
build時にJSファイル内に取り込まれることなく
画像ファイルのサイズが大きい場合でもページ自体の読み込み速度が遅くなることはない。
ブラウザでのキャッシュが期待できるため、2回目以降の表示の際に画像を読み込む必要がなくなる。

デメリット：
build時に画像が圧縮されないので初回表示の際は①に比べて時間がかかる。

個人的にはブラウザでのキャッシュが期待できる②の方法がいいのかなと思いました。

まとめ

reactでimgタグを使用して画像を表示する際は
publicフォルダに画像を配置させて生きていきたいと思います。