React.jsでローカル画像を参照する3つの方法！メリット・デメリットも比較！

2024-04-02

React.jsでローカル画像を参照する方法

publicフォルダを使用する

概要

publicフォルダに画像ファイルを配置し、src属性でパスを指定する方法です。最もシンプルで分かりやすい方法ですが、開発環境と本番環境でパスが異なる点に注意が必要です。

メリット

シンプルで分かりやすい
特別な設定が不要

開発環境と本番環境でパスが異なる
画像ファイルの管理が煩雑になる場合がある

コード例

const MyComponent = () => {
  return (
    <img src="./image.png" alt="My image" />
  );
};

注意点

publicフォルダは、ビルド時にdistフォルダにコピーされます。
開発環境では、localhostまたは127.0.0.1を使用する必要があります。

require()を使用する

require()を使用して画像ファイルをモジュールとして読み込み、src属性でパスを指定する方法です。開発環境と本番環境でパスを統一できる点がメリットです。

画像ファイルの管理が容易

コードが少し複雑になる
Webpackなどのモジュールバンドラーが必要

const MyComponent = () => {
  const image = require('./image.png');
  return (
    <img src={image} alt="My image" />
  );
};

require()は、JavaScriptの機能であり、React.js固有のものではありません。

Base64エンコードを使用する

画像ファイルをBase64エンコードして、data URI形式で直接HTMLに埋め込む方法です。画像ファイルの数が少ない場合や、シンプルなアイコンなどを使用する場合に有効です。

画像ファイルの数が少ない場合に有効
シンプルなアイコンなどを使用する場合に有効

画像ファイルのサイズが大きくなる
コードの見通しが悪くなる

const MyComponent = () => {
  const image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgoQ2AMAhCF/0IBuFwYQ3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A

publicフォルダを使用する

const MyComponent = () => {
  return (
    <img src="./image.png" alt="My image" />
  );
};

require()を使用する

const MyComponent = () => {
  const image = require('./image.png');
  return (
    <img src={image} alt="My image" />
  );
};

Base64エンコードを使用する

const MyComponent = () => {
  const image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgoQ2AMAhCF/0IBuFwYQ3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E0G2Q0Q3A4wK8gQ0E

React.jsでローカル画像を参照するその他の方法

importを使用する

importを使用して画像ファイルをモジュールとして読み込み、src属性でパスを指定する方法です。require()と似ていますが、ES6のモジュール構文を使用できます。

ES6のモジュール構文を使用できる
コードがよりモダンになる

import image from './image.png';

const MyComponent = () => {
  return (
    <img src={image} alt="My image" />
  );
};

URL.createObjectURL()を使用する

URL.createObjectURL()を使用して、画像ファイルのオブジェクトURLを作成し、src属性でパスを指定する方法です。Base64エンコードと似ていますが、データURI形式ではなく、実際のファイルオブジェクトを使用できます。

データURI形式よりも効率的

ブラウザの互換性に注意が必要

const image = URL.createObjectURL(new File(['image.png'], 'image.png'));

const MyComponent = () => {
  return (
    <img src={image} alt="My image" />
  );
};

<img>タグのsrcset属性を使用する

<img>タグのsrcset属性を使用して、異なる解像度の画像ファイルを指定する方法です。デバイスの画面サイズに合わせて最適な画像ファイルを表示できます。

デバイスの画面サイズに合わせて最適な画像ファイルを表示できる
画像の読み込み時間を短縮できる

const MyComponent = () => {
  return (
    <img
      src="./image-lowres.png"
      srcset="./image-highres.png 2x"
      alt="My image"
    />
  );
};