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

Posted by Maxwell Collinge
Maxwell Collinge
3,779 Points

It's Blank where image should be!

Hi all, The links to my images appear with a blank white box. When I use images of my own and not the ones included in the tutorials though, the images show up... what gives? they are all in the same folder

Shunfan Du
Shunfan Du
2,211 Points

Please show your codes and the file list of the directory to enable us to diagnosis the issue.

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The 2 most common mistakes when images are not showing up are a typo with the file names or using the wrong file path.

So triple check that you are using the exact name of the image files in your HTML, if that doesn't resolve the issue, check the file paths.

Here's a quick primer on file paths that should get you going.

Let us know how you are getting along with this here in this thread.

Mike Morales
Mike Morales
19,833 Points
Mike Morales
Mike Morales
19,833 Points

There are a number of reasons as to why your image(s) did not load correctly. You will want to double check your work to see if the link pointing to your location of the image is wrong. Did you use proper spelling, it is easy to miss a single letter in your img=src element, or elsewhere so make sure everything is spelled correctly. You can visit www.w3.org, and enter your html code to check for errors, here is the link: http://validator.w3.org/#validate_by_input. The HTML validator will discover all of your errors, for you. Good luck!

Matt Trask
Matt Trask
10,027 Points

Hi, I put this into the website you posted, but I could barely understand what it was telling me to fix. Could you take a look? I am having the same issue as the original poster. 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" contents="text/html; charset=utf-8">
    <title>Smells Like Bakin Cupcake Company</title>
</head>
<body>
    <img src="img/logo.gif" alt="Smells Like Bakin">
</body>
</html>
Robert Vargas
Robert Vargas
1,736 Points
Robert Vargas
Robert Vargas
1,736 Points

Also don't forget to use correct extensions (.jpg .png .gif etc.)

Maxwell Collinge
Maxwell Collinge
3,779 Points
Maxwell Collinge
Maxwell Collinge
3,779 Points

Thank you all for your help, As it turns out my file path did not reference the correct place (my images were in a nested folder beneath my html) Matt Trask , your code has 2 errors, the first is that the meta tag attribute "contents" should be called "style" the second, I can't tell :P Here is the line I changed to get rid of 1 error
meta http-equiv="Content-Type" contents="text/html; charset=utf-8"