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

HTML HTML Basics Images, Text and Links Adding Images to the Page

Konstantin Shabanov
Konstantin Shabanov
3,505 Points
Posted by Konstantin Shabanov
Konstantin Shabanov
3,505 Points

Broken Images.. Hey guys! I know there are lots of same questions but I guess something is wrong with imgs..

I've tried to add 3 imgs and they are all broken for some reason.. I do use chrome but also tried safari same problem..

<img src="img/featured.jpg" alt="Virtual Reality User"> code looks right.

Please let me know what it can be about if any clue..

Dwayne Froese
Dwayne Froese
12,930 Points

Did you perhaps forget to move your images into the img folder you created?

3 Answers

Daniel Hall
Daniel Hall
Courses Plus Student 882 Points

This case sensitivity issue in workspaces seems to catch a lot of people out.

URLs that point to locations in workspaces are case sensitive. I don't think this is mentioned anywhere (unless I missed it)... so people are finding out the hard way!

You can use capital letters in the names of files and folders in workspaces if you really want to but you then need to use the exact same capitilization in your browser's address bar to avoid getting a 404 "Page not found" error.

In my opinion, the most elegant solution is simply to use lower-case letters exclusively for all file names and folder names in workspaces (e.g. "img" instead of "Img") so that you end up with nice all-lower-case URLs.

Karl Peterson
seal-mask
.a{fill-rule:evenodd;}techdegree
Karl Peterson
Front End Web Development Techdegree Student 2,184 Points
Karl Peterson
.a{fill-rule:evenodd;}techdegree
Karl Peterson
Front End Web Development Techdegree Student 2,184 Points

You saved me! I have been trying to fix this and couldn't see anything wrong with my code. I had capitalized the folder as "Images" but wrote it as "images" in the code. Problem solved!

Konstantin Shabanov
Konstantin Shabanov
3,505 Points
Konstantin Shabanov
Konstantin Shabanov
3,505 Points

Problem was solved, thanks guys! I didn't know that relative folders so sensitive because I called folder "Img" instead of "img" and in src I put "img".

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I agree with Dwayne, check your source URL, it happens to us all, but it's likely the URL isn't correct

Konstantin Shabanov
Konstantin Shabanov
3,505 Points
Konstantin Shabanov
Konstantin Shabanov
3,505 Points

Thanks for the respond, I did actually create img folder and put all 3 imgs inside. index.html file located outside. But still just broken imgs.. I dunno why.