画像パスのチェッカー

imgタグを書いたのに画像が出ないとき、原因のほとんどはパス（画像の住所）の書きまちがいです。下の3つを入れると、どこがちがうのかと、正しく書き直したパスを表示します。入力した内容はどこにも送られず、このページの中だけで判定します。

サイトのフォルダから見た場所。aboutフォルダの中ならabout/index.html。CSSのurl()なら、そのCSSファイル（例css/style.css）。

同じくサイトのフォルダから見た場所。ファイル名は大文字小文字・拡張子まで正確に。

例で試す:

3つとも入れると、ここに結果が出ます。

パスは「srcを書いたファイル」から数える

images/shima.pngのような書き方を相対パスといいます。起点は、srcを書いたHTMLファイルが入っているフォルダです。サイトのいちばん上のフォルダではありません。

たとえばabout/index.htmlからimages/shima.pngを表示するときは、まずaboutフォルダからひとつ上に出る必要があるので../images/shima.pngと書きます。../は「ひとつ上のフォルダへ」という意味です。

CSSのbackground-image: url()も同じで、起点はHTMLではなくそのCSSファイルです。css/style.cssから画像を指すなら、ここでも../images/…になります。

手元では出るのに、公開すると出ない

WindowsとMacは、ふだんファイル名の大文字と小文字を区別しません。そのためShima.pngと書いても手元では表示されます。ところが、公開に使うサーバーの多くは区別するので、公開したとたんに画像が消えます。このチェッカーで「大文字と小文字がちがいます」と出たら、手元で表示されていても直しておいてください。

パスが合っているのに出ないとき

チェッカーで問題が見つからないのに表示されない場合は、ファイルの保存忘れ、画像ファイルそのものの破損、ブラウザのキャッシュが考えられます。開発者ツールの「Console」に出る赤いエラーで、ブラウザがどのURLを探しに行ったかを確かめられます。調べ方は次の記事にまとめています。