htmlソース

間違えやすい画像パスの設定について、ホームページ制作の初心者向け説明ブログで解説されていた

この記事は約2分で読めます。

画像パスの設定方法ホームページ作成はブログなどのCMSで随分と便利になった。しかし、今でも「アップしたはずの画像が表示されない」などのトラブルは多い。
そんな問題の原因と解決方法について親切に説明してくれるブログがあった。レンタルサーバを運用している「さくらインターネット」が昨年から連載ものとしてスタートした「まりなの超初心者講座」である。月に2回ペースで新しい記事が更新されており、最新の第8話で「画像が表示されない場合の対処方法」として原因と対策方法を紹介している。LINEのやりとりのような画面で解説していることもわかりやすさのひとつだろう。

「絶対パス」と「相対パス」の違いを理解する

この解説のなかで「絶対パス」と「相対パス」については以下のように表現されている。
http://marina127.sakura.ne.jp/blog/episode_08/より引用)

[絶対パス] ・コンピュータ内のフォルダ構成の頂点(ルート)から、目的となるフォルダや
ファイルまでの経路を省略することなく記述する方式。

[相対パス] ・現在の位置を基準として、そこから目的となるフォルダやファイルまでの経路を
記述する方式。

この事例では画像のパスを相対パスで記述している。

問題が起きているindex.html内の記述を修正することで画像が表示されるようになった。

[修正前] <img src=”image/Halloween.png” alt=”ハロウィンの写真”>

[修正後] <img src=”Halloween.png” alt=”ハロウィンの写真”>

要するに image/ という部分を削除したら表示できるようになった、ということである。
この場合は、画像ファイルがimageフォルダ内でなく、index.htmlと同じフォルダ内にあったということである。

写真がどのフォルダにアップされているかによって、修正前と修正後が逆の場合もあるのでややこしい。写真をアップロードしたパスには注意である。

404_5118460s.jpg

画像パスが間違っていている画像をクリックすると404エラーになるのでご注意を。