React で publicフォルダ内の静的ファイル(画像)を参照する方法

Reactで画像を表示させる方法

create-react-app で環境を作ったReactアプリの場合、Reactで画像をコンポーネントに表示するには、画像ファイルを import することで Javascript から参照することができます。

例えば、以下の例はロゴ画像を表示するヘッダーです。内部で動いているWebpackがモジュールとして組み込んでくれるため、このようにJavascriptから参照できるという仕組みです。

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

Webpackに入れずに静的ファイルとして参照したい場合

Webpackでモジュール化するということは、ビルド時に組み込まれるということになります。そうではなく、静的ファイルとしてReactアプリと一緒に公開して参照するといったことも場合によっては必要になります。

例えば、画像数が1000を超えるような場合、動的に表示を変える場合など、あらかじめ全画像importするのは得策ではありません。

publicフォルダに静的ファイルを配置して参照する

アプリのエントリポイントとなる index.html ファイルは、public フォルダ以下に配置されています。ここには favicon.ico ファイルなどもあり、ここに静的ファイルを置いておくのがよさそうです。

public フォルダ以下に画像ファイルを配置した場合、参照するには次のようにします。

コンポーネントから参照する

import React from 'react';

function Header() {
  return <img src={`${process.env.PUBLIC_URL}/logo.png`} alt="Logo" />;
}

export default Header;

process.env.PUBLIC_URL は、パブリックフォルダへのURLを持っています。これを接頭辞としてパスを指定します。

利用は控えめに

• create-react-app/README.md at master · facebook/create-react-app · GitHub

ドキュメントには、基本的には import して参照しろとあります。いくつかのユースケースが挙げられておりますが、「画像がたくさんあって動的に参照したい場合には使えるよ」と書いてあるので一つの手段として利用してもよさそうです。

以上。

参考URL

• create-react-app/README.md at master · facebook/create-react-app · GitHub