HTML - pick images of Root Folder from Sub-Folder

Question

lets say following is the DIR structure of my website

Now in index.html i can simply refer images like

<img src="./images/logo.png">

but what if i want to refer the same image fron sub.html what will be the src

Answer 1

<img src="../images/logo.png">
          __ ______ ________
          |    |       |
          |    |       |___ 3. get the filenamed "logo.png".
          |    |
          |    |___ 2. go inside "images/" subdirectory.
          | 
          | 
          |____ 1. Go one level up.

Answer 2

Your index.html can just do src="images/logo.png" and from sub.html you would do src="../images/logo.png"

Answer 3

../images/logo.png will move you back one folder.

../../images/logo.png will move you back two folders.

/images/logo.png will take you back to the root folder no matter where you are/.

Answer 4

The relative reference would be

<img src="../images/logo.png">

If you know the location relative to the root of the server, that may be simplest approach for an app with a complex nested directory hierarchy - it would be the same from all folders.

For example, if your directory tree depicted in your question is relative to the root of the server, then index.html and sub_folder/sub.html would both use:

<img src="/images/logo.png">

If the images folder is instead in the root of an application like foo below the server root (e.g. http://www.example.com/foo), then index.html (http://www.example.com/foo/index.html) e.g and sub_folder/sub.html (http://www.example.com/foo/sub_folder/sub.html) both use:

<img src="/foo/images/logo.png">