Webサイトを作成していて、設定したはずの画像が表示されず、困っていませんか？実は、画像が表示されないトラブルは、Web制作の初心者にとって非常によくある問題の一つです。
この記事を読めば、画像が表示されない原因と、それを解決するための具体的な手順が分かります。主な原因は「画像の場所（パス）の間違い」か「ファイル名の誤り」の可能性が高いです。一つひとつ確認していきましょう。
原因1：画像のパスが間違っている
画像が表示されない最も一般的な原因は、HTMLに記述した画像の場所（パス）が間違っていることです。 パスとは、Webサイト上のどこに画像ファイルがあるかを示す住所のようなものです。
原因の解説
HTMLファイルと画像ファイルの置かれている場所の関係によって、パスの書き方が変わります。この指定が正しくないと、ブラウザは画像を見つけられず、表示することができません。
具体的な解決手順
-
HTMLファイルと画像ファイルの位置を確認する
- HTMLファイルと同じ階層に画像がある場合：
<img src="sample.jpg"> - HTMLファイルと同じ階層にある「images」フォルダの中に画像がある場合：
<img src="images/sample.jpg"> - HTMLファイルより一つ上の階層に画像がある場合：
<img src="../sample.jpg">
- HTMLファイルと同じ階層に画像がある場合：
-
絶対パスと相対パスを確認する
- 相対パス: 上記のように、表示するHTMLファイルを基準にした位置関係で指定する方法です。
- 絶対パス:
https://から始まるURLで指定する方法です。他のサイトにある画像を表示する場合などに使います。
自分のサーバーにアップロードした画像が表示されない場合は、まず相対パスの記述が正しいかを確認しましょう。
原因2：ファイル名や拡張子が間違っている
単純なスペルミスや、ファイル形式（拡張子）の誤りも、画像が表示されない原因としてよくあります。
原因の解説
コンピュータは、ファイル名を1文字でも間違うと別のファイルだと認識してしまいます。 また、サーバーによっては大文字と小文字を区別するため、これも正確に記述する必要があります。
具体的な解決手順
- ファイル名の一致を確認する: HTMLに記述したファイル名と、実際の画像ファイル名が完全に一致しているか（スペル、大文字・小文字など）を確認してください。
- 拡張子を確認する:
.jpgと.jpeg、.pngと.PNGなど、拡張子が正しく指定されているか確認しましょう。 - ファイル名に日本語やスペースを使わない: ファイル名は半角英数字とハイフン（-）、アンダースコア（_）で作成するのが基本です。日本語やスペースが含まれていると、エラーの原因になることがあります。
原因3：画像ファイルがサーバーにアップロードされていない
意外と見落としがちなのが、画像ファイル自体をサーバーにアップロードし忘れているケースです。
原因の解説
Webサイトはサーバー上にあるファイル（HTML、CSS、画像など）を読み込んで表示しています。自分のパソコン（ローカル環境）に画像があるだけでは、Webサイトには表示されません。
具体的な解決手順
- FTPソフトなどでサーバー内を確認する: あなたが契約しているサーバーに、指定したパスの場所に画像ファイルが正しくアップロードされているか確認してください。
- 画像のURLを直接開いてみる: ブラウザのアドレスバーに画像のURL（例:
https://あなたのサイト.com/images/sample.jpg）を直接入力して、画像が表示されるか試してみましょう。表示されなければ、パスが間違っているか、アップロードされていない可能性が高いです。
原因4：ブラウザのキャッシュが影響している
Webブラウザには、一度表示したサイトのデータを一時的に保存しておく「キャッシュ」という機能があります。 これが原因で、古い情報が表示され続け、更新したはずの画像が表示されないことがあります。
原因の解説
キャッシュは、次に同じページを開いたときに素早く表示するための仕組みです。しかし、修正前の状態を記憶していると、画像を差し替えたりしても変更が反映されない場合があります。
具体的な解決手順
- スーパーリロードを試す: 通常の更新ではなく、キャッシュを無視して最新の情報を読み込む「スーパーリロード」を試してください。
- Windows:
Ctrl+Shift+R - Mac:
Command+Shift+R
- Windows:
- ブラウザのキャッシュを削除する: それでも解決しない場合は、ブラウザの設定からキャッシュデータの削除を試みましょう。
それでも解決しない場合に試すこと
上記の基本的な対策で解決しない場合は、以下の点も確認してみてください。
- ブラウザの画像表示設定を確認する: まれに、ブラウザの設定で画像が非表示になっていることがあります。Chromeの場合は「設定」→「プライバシーとセキュリティ」→「サイトの設定」→「画像」で確認できます。
- ファイルのアクセス権（パーミッション）を確認する: サーバー上の画像ファイルに、他の人がアクセスするための権限が設定されていない可能性があります。FTPソフトなどで、ファイルのパーミッションが「644」や「755」など、読み取り可能な設定になっているか確認しましょう。
- CSSで非表示になっていないか確認する:
display: none;やvisibility: hidden;といったCSSのスタイルによって、画像が意図せず非表示にされている可能性も考えられます。
まとめ
Webサイトの画像が表示されないトラブルは、焦らず原因を切り分けることが大切です。以下の3つのポイントを順番に確認してみましょう。
- パスの記述は正しいですか？ HTMLファイルと画像ファイルの位置関係を確認し、パスを正しく記述しましょう。
- ファイル名や拡張子に誤りはありませんか？ 大文字・小文字、スペル、拡張子まで正確に一致しているか確認してください。
- 画像はサーバーにアップロードされていますか？ 自分のパソコンの中だけでなく、サーバーの正しい場所に画像ファイルをアップロードしましょう。
この記事が、あなたの問題解決の助けとなれば幸いです。落ち着いて一つずつチェックすれば、きっと原因は見つかります。
コメント