Reactで画像の相対パスが読み込めない問題【Not Found】

React で開発していると、「画像の相対パスが読み込めない」 というトラブルに出会うことがあります。特に src="../assets/img.png" のような書き方をしたのに、ブラウザで確認すると 404 エラー や 画像が表示されない 現象に悩まされる方は多いでしょう。

この記事ではその原因と解決策を整理し、初心者が陥りやすい誤解を図解やエラーメッセージ例を交えて解説します。

目次

1. なぜ相対パスが効かないのか？

React プロジェクトは、内部的に Webpack や Vite といったビルドツール がファイルを処理します。そのため、単純に HTML のように ../assets/img.png と相対パスを書くと、ビルド時に解決できない ケースが出てきます。ブラウザから見ると存在しない URL にアクセスし、以下のようなエラーが発生します。

GET http://localhost:3000/assets/img.png 404 (Not Found)

このように、開発サーバのルート構造とソースコード内のファイルパスが一致しない ことが、画像が表示されない最大の原因です。

2. 解決方法1: import を利用する

最も推奨されるのは、画像を JavaScript/TypeScript 内で import して利用する方法 です。

import logo from "../assets/logo.png";

function App() {
  return <img src={logo} alt="ロゴ" />;
}

この方法では、ビルドツールが logo.png を適切に処理し、dist フォルダ内にコピーしてくれます。React のアプリ開発においては、この import パターンがもっとも安全で、環境に依存しません。

図解すると以下のような流れになります。

ソースコード (src/assets/logo.png)
       ↓ import
Webpack/Vite が処理 → dist/assets/logo.xxxxx.png にコピー
       ↓
<img src="/assets/logo.xxxxx.png" /> として解決

3. 解決方法2: public フォルダを使う

一方で、ビルド時に変換せずそのまま利用したい静的ファイル は public フォルダに配置します。この場合は相対パスではなく ルート相対パス で参照します。

function App() {
  return <img src="/logo.png" alt="ロゴ" />;
}

このときの図解イメージは以下の通りです。

public/logo.png
       ↓ (変換なし)
ブラウザから http://localhost:3000/logo.png に直接アクセス

つまり、public 配下のファイルはビルドの対象外 であり、そのまま URL として利用されます。例えば Google Fonts の読み込みや favicon など、ビルド時の変換が不要なファイルに適しています。

4. よくある間違い例

初心者が陥りやすい間違いを整理しておきます。

  • 相対パスで直接アクセス <img src="../assets/logo.png" /> → ビルド時に解決されず、404 Not Found になる
  • public フォルダに置いたのに相対パスで参照 <img src="./public/logo.png" /> → 実際には存在しないパスになり、エラー
  • Vite で import を忘れる <img src="/assets/logo.png" /> → public/assets に置いていないとエラーになる

こうした間違いの多くは、「src 配下の画像は import」「public 配下の画像は / から始まる絶対パス」 というルールを知らないことが原因です。

5. 実際に出るエラーメッセージ例

誤った書き方をした場合、以下のようなメッセージに遭遇することがあります。

  • 画像が存在しない場合 GET http://localhost:3000/assets/logo.png 404 (Not Found)
  • import を忘れた場合 Module not found: Error: Can't resolve '../assets/logo.png'
  • public と src を混同した場合 GET http://localhost:3000/src/assets/logo.png 404 (Not Found)

これらのメッセージを見て「本当にそのパスに画像があるのか？」を冷静に確認することが大切です。

6. まとめ

React における画像読み込み問題は、ビルドツールの仕組みを理解していないことが原因 で発生します。正しいルールは次の通りです。

  • src 配下 → import して利用
  • public 配下 → / から始まる絶対パスで利用
  • 相対パスで直接書かない

このポイントを押さえておけば、画像が表示されないトラブルを回避できます。React では Webpack や Vite が裏でファイルを変換しているため、「HTML と同じ感覚で書いてもうまくいかない」ことを常に意識しましょう。開発者がよく遭遇するエラーメッセージを見極め、適切に import や public を使い分けることが、安定したフロントエンド開発への近道です。

タイトルとURLをコピーしました