HTML
画像が表示されない
画像パスが間違っている
こんな症状
<img> タグを書いたのに、画像の代わりに「×」や空白が表示される。画像ファイルを追加した直後によく起きるよ。
まず試す
src のファイル名・パスが実物と完全一致しているか確認する（大文字小文字・拡張子・フォルダも）。
html
<img src="images/photo.jpg" alt="写真">これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓ファイル名の大文字小文字・拡張子が違う
→ 実物と完全一致させる（.JPG と .jpg は別物）。 - ✓別フォルダにある
→ src="images/photo.jpg" のようにパスを書く。 - ✓そもそもファイルが無い
→ 画像がプロジェクト内に存在するか確認する。
なぜ起きる？
ブラウザはsrc属性に書かれたパスの場所に画像を探しに行くよ。そのパスが間違っていたり、画像ファイルがその場所に存在しなかったりすると、画像を見つけられず表示できないんだ。ファイル名の大文字小文字の違い、拡張子の違い（.JPGと.jpg）、フォルダ階層の間違いが主な原因だよ。
✕ エラーが起きるコード
<img src="photo.jpg" alt="写真">
<!-- images/ フォルダにあるのにパスが違う -->✓ 直したコード
<img src="images/photo.jpg" alt="写真">
<!-- 正しいパスを指定 -->✅ 直ったか確認
画像が表示され、NetworkタブでJPG等が200で読み込まれればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- 拡張子が表示されない（.html が見えない） — OS の設定で拡張子が非表示
- favicon（ファビコン）が表示されない — faviconのパス・形式・キャッシュの問題
- iframeが表示されない — 埋め込み先がiframeを拒否している
- videoタグで動画が再生されない — ファイルパスまたはフォーマットの問題
- dialogタグが表示されない — showModal()を呼んでいない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説