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 trialGleb Sklyr
17,492 PointsWant 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.
Ben Dietrich
8,287 PointsI'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
15,579 PointsHi,
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
17,492 PointsWorks Thanks!
sagaya Abdulhafeez
1,600 PointsThis 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
14,600 PointsMake sure the extension is written lowercase. I had this issue often before.
Philip G
14,600 PointsPhilip G
14,600 PointsCan you add some details/code?