ReactJSでBase64エンコードを使用して画像を表示する方法

2024-04-02

ReactJS とパブリックフォルダ内の画像

画像の保存場所

Reactプロジェクトでは、一般的に public フォルダ内に静的なファイルを保存します。画像もその例外ではありません。public フォルダ内のファイルは、ビルド後にそのまま出力ディレクトリにコピーされます。

画像の参照方法

public フォルダ内の画像をReactコンポーネントで参照するには、以下の方法があります。

方法 1: 相対パスを使用する

import React from 'react';

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

export default MyComponent;

この例では、image.png ファイルが MyComponent コンポーネントと同じディレクトリにあると仮定しています。

方法 2: require を使用する

import React from 'react';

const MyComponent = () => {
  const image = require('./image.png');

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

export default MyComponent;

この方法では、require 関数を使って画像ファイルを読み込み、その結果を src 属性に渡します。

import React from 'react';
import image from './image.png';

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

export default MyComponent;

注意事項

public フォルダ内のファイルは、ビルド後にそのまま出力ディレクトリにコピーされるため、ファイル名の命名規則に注意する必要があります。
画像ファイルのパスは、実行環境によって異なる場合があります。開発環境では問題なく動作しても、本番環境ではエラーが発生する可能性があります。

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>画像の表示</h1>
      <img src="./image.png" alt="My image" />
    </div>
  );
};

export default MyComponent;

このコードを MyComponent.js というファイル名で保存し、以下のコマンドを実行して React アプリケーションを起動します。

npm start

ブラウザで http://localhost:3000 を開くと、public フォルダ内の image.png 画像が表示されます。

コードの説明

import React from 'react';: React ライブラリをインポートします。
const MyComponent = () => {: MyComponent という名前の React コンポーネントを定義します。
return (: コンポーネントのレンダリング結果を返します。
<div>: HTML の div 要素をレンダリングします。
<h1>: HTML の h1 要素をレンダリングし、「画像の表示」というテキストを表示します。
<img>: HTML の img 要素をレンダリングし、public フォルダ内の image.png 画像を表示します。
alt: 画像が表示できない場合に表示される代替テキストを指定します。
export default MyComponent;: MyComponent コンポーネントをデフォルトエクスポートします。

上記のコードは、public フォルダ内の image.png 画像を直接参照しています。本番環境では、CDN などの別の方法で画像を参照する必要がある場合があります。
画像ファイルのサイズが大きい場合は、圧縮してファイルサイズを小さくすることをおすすめします。

ReactJSで画像を表示するその他の方法

Base64 エンコード

画像ファイルを Base64 エンコードし、それを src 属性に直接埋め込むことができます。

const image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAAC0H6...';

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

export default MyComponent;

この方法は、小さな画像ファイルに適しています。

第三者ライブラリを使用する

react-image などの第三者ライブラリを使用して、画像を表示することができます。

import React from 'react';
import Image from 'react-image';

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

export default MyComponent;

第三者ライブラリを使用すると、画像の読み込みや圧縮などの処理を自動的に行うことができます。

SVG 画像を使用する

SVG 画像はベクター形式の画像ファイルであり、拡大しても劣化しないという特徴があります。

const MyComponent = () => {
  return (
    <svg viewBox="0 0 100 100">
      <rect x="0" y="0" width="100" height="100" fill="red" />
    </svg>
  );
};

export default MyComponent;