はじめに
Next.jsでは、<img> タグの代わりに next/image の Image コンポーネントを使うことが多いです。Claude Codeに画像表示を頼むと、この Image コンポーネントで実装されたコードが返ってきます。
ところが、いざブラウザで確認すると画像が表示されず、代わりに崩れたアイコンや空白だけが表示される、というつまずきがよく起こります。エラーメッセージが分かりにくいこともあり、原因を特定するまで時間がかかりがちです。
本記事では、Image コンポーネントで画像が表示されないときに、まず確認したい3つの原因を紹介します。
原因1: 外部URLの画像を、設定なしで使っている
他のサイトの画像URL（https://example.com/photo.jpg のような外部URL）を src に指定すると、そのままではエラーになります。
// これだけだとエラーになる
<Image src="https://example.com/photo.jpg" width={400} height={300} alt="サンプル画像" />
next/image はセキュリティ上の理由から、許可していないドメインの画像を表示できないようになっています。使う前に、next.config.ts（または .js）で許可するドメインを登録しておく必要があります。
// next.config.ts
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "example.com",
},
],
},
};
この設定を忘れると、コンソールに「invalid src」といったエラーが出て、画像だけが表示されません。
原因2: width / height（または fill）を指定していない
next/image は、レイアウトのガタつき（画像が読み込まれた瞬間に周りの要素がずれる現象）を防ぐため、画像のサイズをあらかじめ知っておく必要があります。
// widthとheightがないとエラーになる
<Image src="/photo.jpg" alt="サンプル画像" />
width と height を数値で指定するか、親要素のサイズいっぱいに表示したい場合は fill を使います。fill を使うときは、親要素に position: relative を指定しておく必要がある点も忘れやすいポイントです。
<div style={{ position: "relative", width: "100%", height: "300px" }}>
<Image src="/photo.jpg" alt="サンプル画像" fill style={{ objectFit: "cover" }} />
</div>
原因3: publicフォルダのパスの書き方が間違っている
自分のプロジェクト内の画像（public/images/photo.jpg のようなファイル）を表示するとき、パスの書き方を間違えるケースもよくあります。
// NG: publicを含めてしまっている
<Image src="/public/images/photo.jpg" ... />
// OK: publicは書かない（public配下がルート扱いになる）
<Image src="/images/photo.jpg" ... />
public フォルダの中身は、public という文字を含めずに、そこからの相対パスとして参照します。ここを間違えると、パス自体は存在するのに画像だけ表示されない、という状態になります。
AIに実装を確認してもらうときの聞き方
Claude Codeに画像表示のコードを実装してもらった後、「外部URLの画像を使う場合、next.config.tsのドメイン設定は済んでいますか？」「width/heightかfillは指定されていますか？」と一言確認するだけで、この3つの原因のほとんどはその場で気づけます。
まとめ
- 外部URLの画像は、
next.config.tsでドメインを許可しないと表示されない -
width/height（またはfill+position: relative）の指定が必須 -
publicフォルダの画像は、publicを含めないパスで参照する
未経験者向けの講座を運営しています
未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全20セッションで体系化した教材です。Claude Code を学習パートナーにする CLAUDE.md と学習モード（learner / developer）の設計までセットで含みます。
- ▶ ライブデモ（インストール不要・無料で今すぐ見られます）→ https://trial-web-ayies128s-projects.vercel.app/?ref=qiita
- 教材完全版＋月5,500円のメンタリング（全20セッション＋チャット質問し放題）→ https://menta.work/plan/20251?ref=qiita
- 無料体験版（git clone して自分の手元で動かす・最初の数セッション分・⭐ Star もよろしくお願いします）→ https://github.com/ayies128/next-ai-camp-trial
- YouTube『AIエンジニア情報局』（AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料）→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita
※ Qiita読者の方には易しすぎる内容なので、初心者の知り合いへの紹介や社内研修の参考としてどうぞ。