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 HTML Basics Images, Text and Links Captioning Images

At the beginning of this video, teacher wanted us to add vr-user.jpg in article.html

Can I just use this code to do it? <img src="img/vr-user.jpg">

Is it not that we need to group the images in one folder so we can easily access or link them to our webpage, which we did by placing the vr-user photo in the img folder?

Why do we need to type the " ../../ " for?

Sorry I am just confused. It's getting a lil tricky to follow now.

3 Answers

Well as Guil said in the video,he said that you need two to go to the roots of the project and then to reference it you add the img/vr-user.jpg path

Thank you, what did he actually mean by "and then to reference it"? Sorry English is not my first language. Is there another way to explain his instruction of ("and then to reference it") ?

He said in the video " So to display the image we need to reference a file in the image directory from inside the articles in 2017 sub folders. So we need to move out of the 2017 and articles subfolder.Back up to the root, and then back down inside the img folder."

My question is, if we wanted the image to show in articles.html, what is the reason of moving out of 2017 and articles subfolder, then back up to the root, then back down inside the img folder? What is the logic of doing it? Why can't we just insert the code <img src="img/vr-user.jpg"> to the article.html so the image will show?

Kieran Barker
Kieran Barker
15,004 Points

If you don’t add the ../, then the browser will look for a folder called img inside the current directory. But the folder isn’t inside the current directory.

Thank you! I did not realize there was no image folder in the file tree after all. Vr-user.jpg. is not inside an image folder. So is the code <img src="articles/articles.html/vr-user.jpg"> incorrect? Will this code let them access or display the vr-user photo on the website? Or is it wrong file path?

Oops, my bad. I just reviewed the video. I'm seeing the image folder, and the vr-user.jpg is inside it. Still confused. I'll try to keep grasping the concept so I figure this out

KAMRAN IMRANLI
KAMRAN IMRANLI
4,107 Points

You need to add "../../img/vr-user.jpg", because the file to which you want to add image (vr-user.jpg) is located in a folder which is located in a subfolder of the main root folder. So directory to the file, to which you want to add the image is "rootfolder/articles/2017/article.html". Thus, you want to include all the path in your directory of the image, that you want to add (because it is located in another subfolder of the root folder).

Hope it helps.