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

Posted by Jake Nisenboim
Jake Nisenboim
3,374 Points

Pictures not showing up in browser

I am currently using Atom as my code editor although on my homepage, index.html, all of the images appear broken, yet I am able to click on them and they come up in a seperate page.

Is there a reason that I am not able to see them without clicking on them?

I recently moved from workspaces to Atom because workspaces was causing me issues loading.

Oddly, on my about.html, there is a single photo and that shows up just fine.

Thanks.

Jake Nisenboim
Jake Nisenboim
3,374 Points

Again, oddly enough, in workspaces, I had .jpg when the pictures should have been .png but they still showed up.

Now I have fixed that.

Also, I noticed my a href had .png at the end, but not img src. I added .png to both.

Is this correct?

Thanks.

Jake Nisenboim
Jake Nisenboim
3,374 Points

Incredibly wierd. I took out the first a href with the first picture and then all of the images showed up.

I put the a href back and it still works.

I am still curious though, do I even need the a href which is exactly the same as the img src ? And does my img src need to have .png at the end?

Thanks !

Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Can you post your code?

2 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

href is the attribute you use on an a tag to indicate where it should link to. It can be a page, an image or other file, an email address (with the mailto: prefix), and many other things.

The src attribute is used for the img tag (and some others) to indicate the source of the file (i.e. where the image file is located), so the browser knows what to load.

They aren't really related, since they involve different HTML elements. They would both need the file extension for an image to work correctly though (so adding .png to the end is correct, assuming they are PNG images).

Also, the text editor you use shouldn't affect the resulting HTML, aside from maybe the way it formats the whitespace and indentation, etc.

Can you share a Snapshot of your Workspace so we can see the code?

Giorgos Mitsoudis
Giorgos Mitsoudis
6,217 Points
Giorgos Mitsoudis
Giorgos Mitsoudis
6,217 Points

Give the source help us to help you!