Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Adama Sy
Adama Sy
7,076 Points
Posted by Adama Sy
Adama Sy
7,076 Points

When it's time to upload my website onto my serve, I was wondering how the server will read path to images?

Lets say I have an Image in my make user/desktop/logo.jpg, in the server there is not such a path right? so how is that going to work?

1 Answer

Charlie Knight
Charlie Knight
4,338 Points
Charlie Knight
Charlie Knight
4,338 Points

There are two types of image source linking, called absolute and relative paths.

Understanding this is best shown with an example.

Absolute Paths

Absolute path would look like this,

<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png">

In this case, the source of the image is said to be at that address. It isn't going to change no matter where you move the html document. It is the 'absolute' address

Relative Paths

The relative path is going to be common with your webpage, this time your saying that the location of the image is going to be in this directory relative to the current location of the html document. For example, say you have a basic structure:

• C:/Website/index.html

• C:/Website/images/test.png

In your index.html document you now need to specify how to get test.png, this uses relative paths, you using the location of the current document to find that image. The code you'll need is

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

To explain, it will look in current directory (C:/Website) then /images/test.png

If you need to go up to the parent directory this uses '..' to do it, example

• D:/Website/htmlFiles/index.html

• D:/Website/images/test.png

This time you need to go back to "D:/Website" but since the html file is in a child directory (/htmlFiles) compared to the images. You need to go 'up' a directory level. The code you'll need is

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

Hope this helps, Charlie.

Adama Sy
Adama Sy
7,076 Points
Adama Sy
Adama Sy
7,076 Points

my website is showing the images in my computer, I did not upload them yet. My question is, when I will upload the finished website, would the server understand the path? that is the question. Or should I change the path again after uploading it?

Charlie Knight
Charlie Knight
4,338 Points
Charlie Knight
Charlie Knight
4,338 Points

Most probably yes. Assuming you've used relative paths as discussed above.

When you upload your website you'll likely use the FTP protocol, so the as long as you keep your directory structure (folder names) the same - your images will display. I'll give you a couple of examples.

Example One

You have an image on your desktop

• C:\Users\UserName\Desktop\image.png

Your code looks like the 

<img src="C:\Users\UserName\Desktop\image.png">

The server in this case won't understand the path name. You'll need to change it so it uses a relative/absolute path.

Example Two

You've uploaded your all the files you needed, you have your index.html and images in a folder called images. This you use the code:

Absolute Path

<img src="http://www.testwebsite.com/images/animage.png">

or Relative Paths

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

This will still work on the server, as it follows the same directory structure as your local website.

Hope this helps you understand a bit more, If you like you can post an example code of one of your images in your website and I can take a look. Charlie.