Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

file path

I'm sure this will appear to be a very rookie type of question, but I am having difficulty finding a way to shorten the path of my files. For example: as I am following along on building a basic website. The example file path is "img/logo.gif" where mine is "users/name/desktop.."

So I am curious as to how I create a standalone folder like the one in the example?

Any help would be greatly appreciated.

2 Answers

Brooksie, you can shorten your file path by making it relative (img/picture.jpg) and not absolute (/Users/Brooksie/Desktop/picture.jpg).

If you have your folder or directory where your html file is referencing the image at the same level as an images folder you can reference like so-

You have your blog directory where your post.html files live and all your images live. So inside of your blog folder you would have-

first_post.html

And also inside the blog folder you have a folder called blog_images and inside blog_images is a picture called 'batman.jpg'.

So, as far as 'first_post.html' is concerned batman.jpg lives inside at (relative path).

blog_images/batman.jpg

Inside of your first_post.html file you would reference the batman.jpg like so-

< img src="blog_images/batman.jpg" />

Let's say for some reason you had no folder where you organized your blog images and the batman.jpg was also directly "underneath" the blog folder with first_post.html you would reference it like this.

< img src="batman.jpg" />

Let's say for some reason you were very organized and had your batman.jpg file inside or a folder called 'superheroes' inside of a folder called 'blog_images' you would reference like so in the first_post.html

< img src="blog_images/superheroes/batman.jpg" />

Do these relative paths make sense?

Okay guys, I appreciate all the help but I still feel that I am failing to understand this. The path is now working. Unfortunately I am still having to type out the absolute path because the relative path just shows a generic image icon.

This is the path that I am currently using that will show the picture:

img src="/Users/Brooks/Documents/img/logo.jpg" alt="Chore Request"

Thanks for all of the help.

James Barnett
James Barnett
39,199 Points

If a screenshot would help understand check this out

from this tutorials on file paths

Okay guys, I appreciate all the help but I still feel that I am failing to understand this. The path is now working. Unfortunately I am still having to type out the absolute path because the relative path just shows a generic image icon.

This is the path that I am currently using that will show the picture:

img src="/Users/Brooks/Documents/img/logo.jpg" alt="Chore Request"

Thanks for all of the help.