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

My pictures won't show up when i preview my code. (HTML)

When i try to view the added pictures I just get a small blue box showing no picture.

Im not sure how I would add in a screenshot to show you what I'm talking about so if you could tell me how to do that also it might help the chances of my problem being resolved.

Adam Łakomy
Adam Łakomy
10,718 Points

More important than a screenshot is code of yours HTML and CSS. More how to embedded them you can read in this forum post

4 Answers

A.J. Kandy
PLUS
A.J. Kandy
Courses Plus Student 12,422 Points

Presuming you are using an HTML5 doctype, your IMG tags are properly formatted. What appears to be the problem is the relative directory path. The page containing this code needs to be in the same directory as the /img/ folder. If the page is in another directory or another level up relative to the /img/ folder, it's not going to find the path.

Ho Zong Xun
Ho Zong Xun
13,961 Points

make sure all the images is in folder "img" inside index.html folder, and try this code

<a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg" alt=""></a>

Ho Zong Xun
Ho Zong Xun
13,961 Points

post ur HTML IMG code here, are u using like this?

<img src="dog.jpg">

make sure the dog.jpg is same folder as ur .html

<a href="img/numbers-01.jpg"></a> <img src="img/numbers-01.jpg" alt=""> <p>Expirementation with color and texture.</p> </li> <li> <a href="img/numbers-02.jpg"></a> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </li> <li> <a href="img/numbers-06.jpg"></a> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80s style of glows.</p> </li> <li> <a href="img/numbers-09.jpg"></a> <img src="img/numbers-09.jpg" alt=""> <p>Photoshop styled brushes.</p> </li> <li> <a href="img/numbers-12.jpg"></a> <img src="img/numbers-12.jpg" alt=""> <p>Creating lines using repition.</p> </li>

Like what A.J. said, you have to have the actual index.html file and the images in the same folder in the same directory. Otherwise, you have to use absolute ref links (with the complete file path). The image files you have in your markup have to be in the same folder and directory as your index.html that Nick has you started on in the HTML course.