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

Noah Laurent
Noah Laurent
3,080 Points
Posted by Noah Laurent
Noah Laurent
3,080 Points

My images wont upload. Neither in group or alone, nor in chrome or safari. When uploaded, i just get a broken icon. fix?

Tried: log out and back in; download once more; tried with different image files; images after upload just don't show up as images although their name files are there. Tried: change browsers;

Anyone to assist me with this? I guess my training will be over for today... lol

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Hi Laurent, can you provide the code you have been working on?

Noah Laurent
Noah Laurent
3,080 Points
Noah Laurent
Noah Laurent
3,080 Points

How do I do that? You mean a print screen of my worksheet?

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Read this.. How to post code in the forum.

Noah Laurent
Noah Laurent
3,080 Points
Noah Laurent
Noah Laurent
3,080 Points 
<DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laurent Castilho - Designer</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Laurent</h1>
        <h2>Designer</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>
     <section>
       <ul>
       <li>
         <img src"img/numbers-01.jpg" alt="">
       </li>
       </ul>
      <p>Gallery goes here</p>
    </section>
     <footer>
      <p>&copy; 2014 Laurent Castilho</p>
    </footer>
  </body>
</html>
Noah Laurent
Noah Laurent
3,080 Points
Noah Laurent
Noah Laurent
3,080 Points

Is the code that relevant? The images won't upload, that is it. I just get a broken icon symbol..

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Yes the code is relevant because if you write the image tag wrong, your image will also appear broken :)

Noah Laurent
Noah Laurent
3,080 Points
Noah Laurent
Noah Laurent
3,080 Points

But workspace does have a preview section, and there is where I see the broken icons; Now I've corrected the code, but I still don't get my images uploaded to workspace, neither opened when I refresh the preview..

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Try to do right click on your folder and select "upload files" instead of dragging the images in. Also try to add the images one by one. See if that helps you upload them.

5 Answers

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

As Ken nicely stated, you have to do the following changes. I added comments next to them... changing the ':' to '=' and adding the one you omitted will hopefully solve the issue. 

<DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laurent Castilho - Designer</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Laurent</h1>
        <h2>Designer</h2>
      </a>
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>  <!-- Changes in this line and the one below -->
            <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
     <section>
       <ul>
       <li>
         <img src="img/numbers-01.jpg" alt=""> <!-- Changed to fix broken image-->
       </li>
       </ul>
      <p>Gallery goes here</p>
    </section>
     <footer>
      <p>&copy; 2014 Laurent Castilho</p>
    </footer>
  </body>
</html>

That should work.

Noah Laurent
Noah Laurent
3,080 Points
Noah Laurent
Noah Laurent
3,080 Points

It worked! So the code was indeed relevant. Thank you for your patience Gloria. Kind Regards

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Awesome! Don't give up. It is frustrating but you are in the right path. You are welcome.

Darnell Hamilton
Darnell Hamilton
303 Points

Had the same issue, this worked perfect !! THANK YOU

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

You are welcome Darnell :)

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Laurent;

In your statement

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

You are missing the "=" sign for src="img/numbers.-01.jpg". You will have the same issue with your href links in your nav section.

Ken

Noah Laurent
Noah Laurent
3,080 Points
Noah Laurent
Noah Laurent
3,080 Points

Thanks, now the broken icon appears on the browser! But still no images being uploaded..

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Laurent;

Are your images (numbers-XX.jpg) residing in your img folder?

Ken

Jim Withington
Jim Withington
12,025 Points
Jim Withington
Jim Withington
12,025 Points

It might be that your images were uploaded, but not placed in the correct place in your Workspace.

I think this is for the How to Make a Website course, and if so, make sure that your images are moved to the img folder:

img folder

If they really are simply not uploading, that you'll likely need to complete a support ticket.

Good luck!

Jim Withington
Jim Withington
12,025 Points
Jim Withington
Jim Withington
12,025 Points

Laurent Castilho : no problem!

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Hi james rochabrun .Try to follow the steps we told Laurent. Check your code and make sure you have placed the images in the right file.

Noah Laurent
Noah Laurent
3,080 Points
Noah Laurent
Noah Laurent
3,080 Points

James, the thing is, the icon still appears os the preview from workspace when you successfully upload them. Check out your code because after correcting the code the images do show up on the browser (although they are still icons on the workspace).