その、「読み込む」という作業は、「パス」という考え方を使います。
中でも、「読み込むファイル」から、「読み込まれるファイル」の場所を指定する方法を相対パスと言います。
以下、HTMLから画像を読み込む場合のパス指定をサンプルに、説明していきます。
読み込まれるファイルが同じ場所にある場合
この場合は、読み込みたいファイルのファイル名を書いていきます。<img src="ファイル名">
例）
<img src="neko.jpg">
<img src="inu.jpg">
<img src="sora.jpg">
読み込まれるファイルが、フォルダーの中にある場合
この場合は、ファイルのあるフォルダまで、フォルダー名をスラッシュ（/）で区切って、記述していき、最後にファイル名を書いていきます。<img src="フォルダー名1/フォルダー名2/・・・・/ファイル名">
例)
imgフォルダーの中のneko.jpg
<img src="img/neko.jpg">
commonフォルダーの中のimgフォルダーの中のinu.jpg
<img src="common/img/inu.jpg">
読み込まれるファイルが、自分から見て外のフォルダー（上の階層）にある場合
この場合は、ファイルがあるフォルダまで、「../」で区切って記述していき、最後にファイル名を書いていきます。<img src="../../・・・・/ファイル名">
例）
一つ外のフォルダー（上の階層、上のフォルダーとも呼ぶ）にある、sora.jpg
<img src="../sora.jpg">
二つ外のフォルダー（上の階層、上のフォルダーとも呼ぶ）にある、neko.jpg
<img src="../../neko.jpg">
読み込まれるファイルが、一つ外のフォルダーのimgフォルダーの中にある場合
今までのパス指定を、複合したのが、このパターンです。 あくまで、読み込むHTMLから画像まで辿っていく考え方です。<img src="../・・・・フォルダ名/・・・・/ファイル名">
例） 一つ上のフォルダーの、imgフォルダーの中のinu.jpg
<img src="../img/inu.jpg">
まとめ
いくつかのパターンで、パスの表示の仕方を紹介しましたが、どれも基本的な考え方は同じです。 「読み込むファイル」から、「読み込まれるファイル」の場所を指定していきます。 今回のサンプルの場合、読み込むファイルは、htmlファイルの事です。 読み込まれるファイルは、各jpgファイルです。以下のサイトでも、詳しく解説していますので、よろしければどうぞ。
HTMLで画像を表示する方法
