2022-08-10

HTML: 画像が表示されない原因No.1はパスの間違い

HTMLコーディングをしている時に、画像が表示されないケースがあります。原因はいくつか考えられますが、一番多いのがファイルのパスが間違っている場合です。

そこでこのページではパスが間違っているケースを前半で解説し、後半では他の原因のケースを紹介します。

画像が表示されない原因No.1：画像ファイルのパスが違っている

まずは、最も多い原因である「画像ファイルパスの間違い」について解説します。

パスとは「道（Path）」のことです。「どういう経路をたどれば目的のファイルやフォルダへたどり着けるか」を示したものです。

具体的には「imgタグ」の「src属性」の内容で、下の「imgタグ」で言うと、「img/画像ファイル.png」がパスになります。


<img src="img/画像ファイル.png">

パスを示す方法は「絶対パス」「ルートパス」「相対パス」の 3通りあります。まずはこの3つの違いをしっかりと理解してください。ちなみに、この3つの中で最も間違いが多いのは「相対パス」指定の場合です。

「絶対パス」とは、「https:// や http://」から始まる指定方法で、最上位の階層からファイルの場所を示す方法です。

<img src="https://xxx.com/img/画像ファイル.png">

「ルートパス」とは、「/（スラッシュ）」で始まる指定方法で、最上位の階層からファイルの場所を示す方法です。

<img src="/img/画像ファイル.png">

次で説明する「相対パス」と記述方法が似ていますが、先頭に「/（スラッシュ）」が付くか付かないかで、意味が全然違ってくるので注意が必要です。

「相対パス」とは、HTMLファイルの現在の場所（フォルダ）を起点として、 相対的にファイルの場所を示す方法です。

HTMLファイルの場所と、画像ファイルの場所の相対的な位置関係によって記述内容が異なります。

HTMLファイルの場所と同じ階層に画像ファイルがある場合は、次のように記述します。

<img src="画像ファイル.png">

HTMLファイルの場所より1つ上の階層に画像ファイルがある場合は、次のように記述します。

<img src="../画像ファイル.png">

「../」で1つ上の階層を示します。

<img src="../../画像ファイル.png">

「../」が1つ上なので、2つ繋げて書いた「../../」は2つ上の階層を示します。

HTMLファイルの場所より1つ下の階層に画像ファイルがある場合は、次のように記述します。

下の例ではimgフォルダの中にある画像ファイルを指定しています。

<img src="img/画像ファイル.png">

HTMLファイルの場所より2つ下の階層に画像ファイルがある場合は、次のように記述します。

下の例ではpartsフォルダ中の、imgフォルダの中にある画像ファイルを指定しています。

<img src="parts/img/画像ファイル.png">

「相対パス」指定では上記のように指定するため、相対的に離れた位置関係に画像ファイルが存在する場合、記述ミスが起きやすくなります。

次のように「file://」で指定している場合、

<img src="file://c:/homepage/img/画像ファイル.png">

この場合は、サーバー上のパスを指定せずに、ローカルPCのファイルパスを指定していることになります。ですからローカルPC上では表示されますが、他の端末では表示されません。

ホームページ作成ソフトを使って画像を指定した場合、こうした指定方法のままで記述しているケースがあります。「絶対パス」「ルートパス」「相対パス」のいずれかで指定してください。

単純にタグの入力間違いの場合です。画像を表示するための要素名は「img」です。「image」ではありません。ファイルのパスを記述する属性は「src」です。「source」ではありません。スペルミスがないかを確認してみてください。

<img src="画像ファイル.png">

これも単純な入力間違いの場合です。手入力した場合にファイル名を間違えてしまうケースがあります。特に、画像の拡張子がいつもと違う場合は拡張子を間違えやすいので注意してください。

<imgsrc="画像ファイル.png">

「HTMLファイルはアップロードしたけど、画像ファイルはアップロードし忘れた」という場合です。

ローカルPCで作業している時は表示されていたけど、サーバー上のHTMLファイルを参照した時に画像が表示されない場合があります。その場合はたいていこのケースです。

HTMLファイルの画像が表示されない問題について説明してきました。最初に述べたように、まずはパスが間違っていないかを確認してください。パスには「絶対パス」「ルートパス」「相対パス」の3種類があります。

パスが合っている場合はその他の原因を疑ってみてください。タグの入力間違いや、ファイル名の間違い、画像のアップ忘れなどです。