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 trialbecky f
Courses Plus Student 344 Pointsimages not appearing in browser
my images are not showing in the browser..how do i specify where the files are?
5 Answers
Philip Allen
8,171 PointsHello Becky
If you have website directory and within this parent directory you have both your html page and your image file then the html markup should look like this.
<img src="imagename.jpg">
If you want to keep your images together in a subdirectory called 'img' then your html should look like this.
<img src="img/imagename.jpg">
Hope this makes sense.
becky f
Courses Plus Student 344 PointsHey guys Nick's link was really helpful...thank you!!
Hugh Mitchell
Courses Plus Student 258 PointsI'm having this issue. I read the blog post which is great, but I'm still not getting something (that's probably obvious so forgive me).
It seems to be generally a no-no to link files from another website. Also not advised to link files from your own computer, as this won't work in anyone else's browser. So, wait, where DO you link them from? I understand the idea behind saying what the folder is, and then saying the name of the file within that folder, but where is this folder supposed to be?
I'm SUPER new to this, so apologies for asking dumb questions...
Philip Allen
8,171 PointsHi Hugh,
Linking from other websites can be unreliable and when it says do not link from your computer, it means do use a full path like file:///Users/Hugh/website/img/image.jpg this path is only correct on your PC.
When you use a relative path you can put the folder where ever you want when you are developing the site.
Lets say you have a website called myfirstsite. In your documents folder you could create a directory called 'websites' and within 'websites' you create another directory called my 'myfirstsite'. In the myfirstsite directory you place an index.html file and you place an image file called image01.jpg in another directory called 'img'. The full path on a Mac to your image would be file:///Users/Hugh/Documents/websites/myfirstsite/img/image01.jpg
on a PC it could be something like C:\Documents and Settings\My Documents\website\myfirstsite\img\image01.jpg
.
Because all your web files are within the same directory of myfirstsite you can use a relative path that starts from there. In your html file the relative path to your image is just img/image01.jpg
. By using relative paths you can move your website directory to another location your html will still work.
Later as you get further in to web design and development you may need to run web server software such as Apache and the placement of your website directory becomes even more important as your web server will need to know where the files are but as long as the relative paths work on your site you only need to tell the web server the root directory location.
Hope this helps.
Hugh Mitchell
Courses Plus Student 258 PointsThanks Philip, that's very helpful. I'm slowly getting to grips with this!
Adam Lake
3,810 PointsAdam Lake
3,810 PointsCan you paste in your code?