Pick images of root folder from sub-folder

Question

Let's say following is the directory structure of my website : DIR STRUCTURE

Now in index.html I can simply refer images like:

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

But I want to refer the same image from sub.html. What should be the src?

score 97 · Answer 1 · answered Sep 07 '10 at 00:42

97

../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/.

answered Sep 07 '10 at 00:42

Moses

9,033
5
44
67

3

Just to add some point. If you are using localhost on IIS, /images/logo.png will not produce any image. It will search in the root of the localhost instead of application. Take a look at http://stackoverflow.com/a/15357705/114169 – 100r Jan 31 '14 at 22:32
where would be the root folder in this case? the folder containing images, sub_folder and index.html, or the root folder of the project? – sorry_I_wont Apr 09 '16 at 09:39
@Ashl7 The root folder is the one that is accessed via the domain without any subfolders specified. – AntonChanning Jul 09 '16 at 11:39
1

Should be marked answer. The third option was the one I needed. – alejnavab Jan 04 '17 at 03:51

aularon · Accepted Answer · 2019-09-13T06:23:13.117

93

You can reference the image using relative path:

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

Or you can use absolute path: / means that this is an absolute path on the server, So if your server is at https://example.org/, referencing /images/logo.png from any page would point to https://example.org/images/logo.png

<img src="/images/logo.png">
          |______ ________
          |    |       |
          |    |       |___ 3. Get the file named "logo.png"
          |    |
          |    |___ 2. Go inside "images/" subdirectory
          | 
          | 
          |____ 1. Go to the root folder

edited Sep 13 '19 at 06:23

answered Sep 07 '10 at 00:42

aularon

11,042
3
36
41

am i gonna have one dot for one level down in directory – Moon Sep 07 '10 at 00:43
8

No, you don't need it. `.` means current directory, `..` means parent directory. – aularon Sep 07 '10 at 00:46
@aularon so does ... mean two directories above and so on? – Parth Sane Sep 08 '16 at 09:19
4

No. `../` is one directory above, `../../` is two directories above, and so on... – aularon Sep 09 '16 at 06:25

score 12 · Answer 3 · answered Sep 07 '10 at 00:50

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">

score 4 · Answer 4 · answered Sep 07 '10 at 00:42

4

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

answered Sep 07 '10 at 00:42

Robusto

31,447
8
56
77

score 2 · Answer 5 · edited Jun 25 '15 at 17:23

2

../ takes you one folder up the directory tree. Then, select the appropriate folder and its contents.

../images/logo.png

edited Jun 25 '15 at 17:23

Interrobang

16,984
3
55
63

answered Jun 25 '15 at 10:36

Bopsi

2,090
5
36
58

score 0 · Answer 6 · answered Dec 03 '16 at 05:29

when you upload your files to the server be careful ,some tomes your images will not appear on the web page and a crashed icon will appear that means your file path is not properly arranged or coded when you have the the following file structure the code should be like this File structure: ->web(main folder) ->images(subfolder)->logo.png(image in the sub folder)the code for the above is below follow this standard

 <img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

if you uploaded your files to the web server by neglecting the file structure with out creating the folder web if you directly upload the files then your images will be broken you can't see images,then change the code as following

 <img src="images/logo.jpg" alt="image1" width="50px" height="50px">

thank you->vamshi krishnan

score 0 · Answer 7 · answered Dec 03 '16 at 05:32

when you upload your files to the server be careful ,some tomes your images will not appear on the web page and a crashed icon will appear that means your file path is not properly arranged or coded when you have the the following file structure the code should be like this File structure: ->web(main folder) ->images(subfolder)->logo.png(image in the sub folder)the code for the above is below follow this standard

<img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

if you uploaded your files to the web server by neglecting the file structure with out creating the folder web if you directly upload the files then your images will be broken you can't see images,then change the code as following

<img src="images/logo.jpg" alt="image1" width="50px" height="50px">

thank you->vamshi krishnan

Pick images of root folder from sub-folder

7 Answers7

Linked

Related