Why does just adding "images/pattern.jpeg" work in addition to ../resources/images/jpeg?


#1

How does it know to grab the file from the root folder/resources/images/pattern.jpeg?

I’m trying to change the url of a background photo from an absolute path to a local path.


#2

The relative path works because the images folder resides in the same location as your index.html page.

+ resources/
    - index.html
    + images/
        - pattern.jpeg

#3

What if there was an additional folder to resources with a folder called images in it and a picture file also called pattern.jpeg? What would it use then?


#4

A relative path always begin with the current document. How your server is arranged is not an issue. Map out your folders, similar to above, and trace the route from your index.html page to the resource you wish to import.

Say you have something like this…

 + project/
     - index.html
 + resources/
    + images/
        - pattern.jpeg

The relative path to your image file will be,

 src="../resources/images/pattern.jpeg"

For a site hosted on a live web server, the URL (domain.tld) need not be in the resource path. / is the root directory.

src="/resources/images/pattern.jpeg"

Mind, that is still absolute, all the same.


#5

Thank you

So say it was like

  • Project/
  • index.html
  • resources /
    + images /
    - pattern.jpeg
  • resources 2 /
    + images /
    - pattern.jpeg

If I were to just type images/pattern.jpeg when linking to say the picture I wanted in the first resources folder, what would happen (the resources 2 folder also being in the root folder)?

Regards,

CEdobor


#6

Okay, so as I understand it, everything is in the Project folder, correct?

+ Project/
    - index.html
    + resources/
        + images/
            - pattern.jpeg

If your path to the image file is written as,

src="images/pattern.jpeg"

then technically the file will not be reachable. However, servers today are quite intuitive and may look for alternate paths in a best guess scenario and may locate the file on its own. This is making the server work awful hard and will slow down the page load.


#7

Okay, thank you.

I’m new to css so I was just wondering what a computer would do if there were different paths to a file in a folder called images. If they look for alternative paths would they just pick one out of the two?


#8

Assuming the server is so equipped, it would not be able to tell which image you want. It would take the first one it finds, be it a thumbnail or a production image. There would be no telling them apart without examining the files headers.

Ideally, we should locate our resources in a single location, and use correct path names to them. Never assume the server is on your side. It’s just a computer, after all.


#9

Thank you very much.

Regards,

CEdobor


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.