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 Structure the Image Gallery

Posted by Gleb Sklyr
Gleb Sklyr
17,492 Points

Want to add my won photos

The photos in the project files work fine but when I add another photo it shows up as a broken picture in the preview option. It is the same jpg format and I also tried a 1024 x 768 size.

What might the issue be?

I did everything like in the video same code:

<section>
  <ul>
    <li><img src="img/date1.jpg" alt=""></li>
  </ul>
</section>

When I switch the "date1" to a name of an image from the given project files - it shows me the photo in the preview.

Philip G
Philip G
14,600 Points

Can you add some details/code?

Ben Dietrich
Ben Dietrich
8,287 Points
Ben Dietrich
Ben Dietrich
8,287 Points

I'd check two things Gleb. Make sure the files are located in the parent img folder and that they have the proper file extensions (jpg vs. .png).

3 Answers

Shawn Jones
Shawn Jones
15,579 Points

Hi,

This definitely sounds like a file location error in which the files aren't properly located and therefore can't be referenced when loading the web page.

You must first make sure the images are in the proper folder. Let's say you have a folder named project. And you put and image inside that folder named project, the source path would just normally be the file name because project is the root folder and thus doesn't need to be called, like this:

<img src="my-image.jpg" />

Now let's say the image is located inside a folder called "img", here you would have to reference the folder its inside of because that's considered another tier on the tree so it would look like this:

<img src="img/my-image.jpg" />

So thus every time you have to traverse a folder within a folder, you add the folder name with a slash to provide the location.

Last thing to check if that doesn't help is of course the spelling of the name an the extension, and also if the extension is true to the file type. For example you export a PSD file from photoshop but you didn't save it as a jpeg or PNG or svg, instead its a PSD and then you changed the extension on the name, the broswer think its the specified extension and renders it wrong which will also make it not show. I've done that several times when saving to fast and load the image only to realize the path is broken because its the wong extension.

Hope that helps. Shawn

Gleb Sklyr
Gleb Sklyr
17,492 Points

Works Thanks!

sagaya Abdulhafeez
sagaya Abdulhafeez
1,600 Points
sagaya Abdulhafeez
sagaya Abdulhafeez
1,600 Points

This problem may be with the image you are uploading try renaming the image and ensure the extension is .jpg then re upload it, it should work like that.

Philip G
Philip G
14,600 Points
Philip G
Philip G
14,600 Points

Make sure the extension is written lowercase. I had this issue often before.