画像が表示されない（パスが合っているはずなのに）

✅ 回答

画像が表示されない原因は主に3つあります。順番に確認してみましょう。

原因1：ファイル名の大文字/小文字が違う

パソコン上では Photo.jpg と photo.jpg が同じに見えることがありますが、Webサーバーでは大文字と小文字は別物です。

<!-- ❌ ファイル名が photo.jpg なのに Photo.JPG と書いている -->
<img src="images/Photo.JPG" alt="写真">

<!-- ✅ 実際のファイル名と完全に一致させる -->
<img src="images/photo.jpg" alt="写真">

原因2：相対パスの起点が間違っている

相対パスはHTMLファイルがある場所から見た位置です。フォルダ構造を確認しましょう。

<!-- フォルダ構造 -->
<!-- project/
       index.html
       images/
         photo.jpg -->

<!-- index.html から見て images フォルダの中 -->
<img src="images/photo.jpg" alt="写真">

原因3：拡張子が実際と異なる

ファイルが .jpg なのに .png と書いていませんか？拡張子を表示する設定にして確認しましょう。

確認方法：開発者ツールを使う

F12で開発者ツールを開き、「Network」タブを見ます。画像ファイルに404エラーが出ていれば、パスが間違っています。

まとめ：ファイル名の大文字/小文字を正確に合わせ、HTMLファイルからの相対パスを確認し、拡張子が正しいかチェックしましょう。