HTMLとCSSを用いてウェブサイトを制作をする時に、
コードには間違いがないのに画像が表示されない！
という困ったトラブルに遭遇したので、原因と解決方法をまとめておきます。
※HTMLとCSSに限らず、ファイルパスをあれこれするときに動作がおかしい場合、使える可能性があります。
コードは間違っていないのにいくら再読込しても画像が表示されない
先日、ウェブサイト制作中に、正しいコードのはずなのになぜか画像が表示されない事態に遭遇しました。
HTMLでは画像を表示させたい時、
<img src=”（画像のURL）” />
と書きます。
今回書いたソースも当然、以下のように書きました。
- HTML上では「top.jpg」と記述
index.htmlと同じ場所にあるimagesフォルダに対して<img src=”images/top.jpg” />と指定 - 画像ファイルも名前は「top.jpg」になっている
なのに、いくらブラウザ上で読み込んでも画像が表示されません。
なにこれ？どういうこと？？
と思ってよくよく調べてみると、
画像のファイル名が「top.jpg.jpg」っていうトンチンカンなものになっていたようです。
PC側の設定が、ファイル名に拡張子を表示しない状態だったのに、
うっかり手動で拡張子をつけてしまい、
[ファイル名.jpg].jpg
という珍妙なファイルが出来上がってしまったというミスです。
これでは、そもそもパス名が間違っているので、いくら再読込しても画像は表示されません。
では解決方法はというと、
- PC側でファイル名＋拡張子で表示する設定にする
- 不要になったファイル名の「.jpg」を消す
これだけ。
ね、簡単でしょ？
PC側で拡張子を表示する設定にする方法
筆者の使っているWindows7でのやり方は以下の通りです。
win7:コンピュータ→整理→フォルダと検索オプション
→表示タブ→「登録されている拡張子は表示しない」のチェックをはずす
Windows10ではもっと簡単にできるようです。
Win10:エクスプローラー→表示タブ
→「ファイル名に拡張子」にチェックを入れる
参考：Windows10 – ファイルの拡張子を表示/非表示にする
コードが合っていても画像ファイル側が間違っていると表示されない
今回のトラブルで、
いくらコードを正確に書いても、
画像ファイル側がおかしな設定になっていると、
ウェブページできちんと表示されないということを学びました。
ファイル拡張子だけでなく、
- カラーモードの指定（Web用の場合はRGB）
- ファイル名は英数のみにする（日本語が混ざるとダメな場合がある）
のようなミスもよくやりがちなので、
HTMLのコードは合っているのに画像が表示されなくて悩んでいる人は一度確認してみてください！
◆この記事を読んだ人にオススメ！