HTMLでJPEG/PNG等の画像が表示されない・×印になる原因と対処法

Webページを制作する際、HTMLを利用して画像(JPEG/PNG/GIF等)を表示させるためのタグを挿入しても正常に表示されないことがあります。実際にページを表示させた際に画像が表示されなかったり、×印になってしまったりすると困ってしまうでしょう。

そこで、この記事ではHTMLで画像が表示されない場合の原因および対処法を紹介します。Webページの作成に携わっている場合はこの現象に直面することが多いので、対処法をしっかり覚えておいてください。

HTMLで画像が表示されない原因

このようにHTMLでimgタグを挿入しても正常に表示されない原因にはさまざまなものがあります。この中でよくあるのがimgタグの記述ミス(単純な誤字脱字を含む)と画像ファイルの指定間違いです。

これから画像が正常に表示されない場合の対処法を1つずつ紹介するので、上記のポイントを念頭に置いてチェックしていきましょう。

対処1: imgタグの記述内容を修正する

特定のページだけ画像が表示されない場合や、特定の画像だけが表示されない場合にまずチェクしなければならないのはimgタグが間違いなく記述されているかどうかです。imgタグは基本的に以下のような記述になっています。

<img src="https://xxxxxxxxxxxxxxxxxx.jpg" alt="代替文字列" width="239" height="300" />

この中で画像を表示させるために最低限必要なものはsrc属性のみなので、以下のような記述でも画像が表示されます。

<img src="https://xxxxxxxxxxxxxxxxxx.jpg">

そのため、まずはこのような最低限の記述で表示されるかを確認してみてください。これで表示される場合、画像ファイルの指定や画像自体には問題がないことがわかります。

問題が無いことを確認したら、本来記述したいタグをチェックして誤字脱字などが無いかを確認しましょう。よくあるのがダブルクォーテーション(")や拡張子(jpg/pngなど)の脱落です。他にも単純なミスタイプが存在している可能性があるので、注意して1文字ずつチェックしていってください。

もし、最低限の記述でも表示されない場合はタグの記述に問題があるのではなく、画像ファイルの指定方法やファイル自体に問題がある可能性が高いので、次の手順に進みます。

対処2: 画像ファイルを正しく指定する

Imgタグのsrc属性内に記述した画像ファイルの指定が間違っていることによって、画像が表示されない場合も多々あります。基本的に画像ファイルはフルパスで指定するので、以下のような記述になっているはずです。

<img src="https://xxxxx.com/abc/image/testimg.jpg">

ここでよくある間違いは以下の通りなので、一度チェックしてみてください。

ケース1: パスの中に半角英数以外の文字が混ざっている

画像ファイルを指定したパスの中に半角英数以外の文字が混ざっていると正常に表示されないことがあります。

予期せぬエラーやバグを防ぐためにも、日本語文字やキリル文字などの半角英数以外の文字をフォルダネームやファイルネームに使わないようにしてください。

ケース2: ローカルディレクトリの画像ファイルを指定している

画像ファイルを指定する際に、間違えてサーバにアップロードしたものではなくローカルフォルダに保存しているものを指定してしまうことがあります。

画像ファイルへのパスをチェックした際に、"file://"から始まっている場合はローカルフォルダを指定しています。

アップロード済みのファイルを指定する場合のフルパスは基本的に"http://"（もしくは"https://"）からはじまるのでよく確認してください。

もし、ローカルフォルダの画像を指定している場合はアップロード済みの画像ファイルへのパスに書き換えれば正常に表示されるでしょう。

ケース3: 画像ファイル以外のものを指定している

ファイルの指定間違いも製作時によくあるミスです。srcのパス部分を見ると次のように拡張子を間違えている場合があります。

<img src="https://xxxxxxx/image.txt">

拡張子を見た際に画像(img/png/gifなど)以外になっている場合は間違いです。

この場合も画像ファイルへのパスを再度確認し、パスを正しいものに書き換えれば表示されます。

対処3: 画像ファイルをサポートしているフォーマットにコンバートする

アップロードした画像がWebサーバやブラウザでサポートされていないために表示されないということもあります。「確実に画像ファイルを指定しているのに表示されない」という場合、このパターンであることが多いのでチェックしてみてください。

基本的に、Webサーバやブラウザでサポートされていることが多い画像ファイルのフォーマットは以下の通りです。

この中でよく使われるのはJPG・JPEG・PNGなので、使用するのは基本的にこの3種のいずれかにするのがいいでしょう。

上記のフォーマットであれば、全てのWebブラウザが対応しているので、表示に問題が起こりにくいです。

紛れ込む可能性のある非対応の画像フォーマット

非対応の画像形式のうち、よく紛れ込むのが次の形式の画像フォーマットです。うまく表示されない場合は、これらの形式の画像が紛れ込んでいないか確認してみてください。

上記のような画像フォーマットだった場合は、ペイントやフォトなどの画像編集ソフトでJPEG/PNGの形式で保存してから、再度アップロードしてIMGタグで指定してみて下さい。

対処4: 画像ファイルをアップロードし直す

画像ファイルが破損していることによって正常に表示されないことがあります。この場合は再度画像ファイルをアップロードしてチェックしてみてください。

ローカルに保存されているものは正常に表示されている場合、アップロード時に破損した可能性が高く、多くの場合は再アップロードで直ります。

アップロードが完了したら直接画像ファイルにアクセスし、正常に表示されるかを確認しましょう。画像ファイルへのフルパス(src属性内のhttp://xxxxx.jpgの部分)をブラウザのアドレスバーに入力して正常に表示されれば問題ありません。

対処5: 時間をおいてアクセスする

全ての設定が正常で、画像ファイルにも問題がないのに画像が表示されない場合は、サーバー側の外部要因によって画像が読み込めていないケースも稀にあります。

したがって、この場合は一度時間をおいてからアクセスしてみてください。これで正常に表示されるようになった場合は混雑などの一時的な要因だったと判断できます。

なお、混雑する時間帯になると頻繁に画像が読み込めなくなる場合は、アクセス数に対するサーバのスペックが不足している可能性があります。Webサイトを安定して運営するためにも、サーバの増強を検討してください。