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!

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 How to Make a Website Creating HTML Content Add Image Gallery Content

Eric Wullenbaecker
Eric Wullenbaecker
1,715 Points

My images do not show properly

Hello,

my images are clickable and linked and they also open up once you click on them. However, they are not visible and are just shown as small icons.

How can I fix this?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eric Wullenbaecker | Growth Hacker</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Eric Wullenbaecker</h1> <h2>Growth Hacker</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers–01.jpg" alt=""> <p>Experimentation with Color and Texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers–02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers–06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers–09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers–12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/ewullenbaecker"><img src="img/twitter–wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/steve.tabernackle"><img src="img/facebook–wrap.png" alt="Facebook Logo"></a> <p>© 2014 Eric Wullenbaecker</p> </footer> </div> </body> </html>

5 Answers

Jacob Miller
Jacob Miller
12,466 Points

Sound's like you are not linking to them correctly. Make sure you add the path to the file in the src value. If they are within a folder, make sure you specify that from the html. For example <img src="folder/photo.jpg" />

Eric Wullenbaecker
Eric Wullenbaecker
1,715 Points

Thanks Jacob. I am linking them correctly though:

          <img src="img/numbers-01.jpg" alt="">
            ``` 

  The index.html file is also not in the pics folder and the folder is called img. I tried to reupload and do it again, but it won't work.

Here all my code: 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eric Wullenbaecker | Growth Hacker</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Eric Wullenbaecker</h1> <h2>Growth Hacker</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="numbers-01.jpg"> <img src="img/numbers–01.jpg" alt=""> <p>Experimentation with Color and Texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers–02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers–06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers–09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers–12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/ewullenbaecker"><img src="img/twitter–wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/steve.tabernackle"><img src="img/facebook–wrap.png" alt="Facebook Logo"></a> <p>© 2014 Eric Wullenbaecker</p> </footer> </div> </body> </html>

        ```
Jacob Miller
Jacob Miller
12,466 Points

Hmm. Can you repost your code please? It didn't get formatted correctly the first time. Check out the video to the right called "Tips for asking questions" and they explain how to get it to show up right. Thanks.

Eric Wullenbaecker
Eric Wullenbaecker
1,715 Points

Hi Jacob, I found it :). It was just visible on your this screen. I used a long [–] instead of a short [-] in the pictures. It now shows up.

Jacob Miller
Jacob Miller
12,466 Points

Cool. Glad you figured it out. :)