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 Justin Riestra
Justin Riestra
4,904 Points

How to Add Image Files to Atom Document?

Hello,

I'm working with Atom (new to programming) and cannot figure out how to add an image file to my site.

I'm using a link from my google photos page as the image source, but with no luck. I keep getting the broken image placeholder. Any thoughts? I've included the code below.

<!DOCTYPE html> <html lang="en">

<head > <meta charset="utf-8"> <title>Hello World!</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> </head>

<body> <h1>.Justin Riestra.</h1> <img src="https://goo.gl/photos/Dw3QB4KUDh7gFJHN9">

</body>

</html>

1 Answer

Brandon Leichty
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Leichty
Full Stack JavaScript Techdegree Graduate 35,193 Points

Hey Justin,

The reason you're running into this issue is because the link you're providing to the image isn't actually a link to your direct photo. It should end in something like .jpg.

So it'd look something like this: https://goo.gl/photos/Dw3QB4KUDh7gFJHN9.jpg

I'd encourage you to use the web inspector in your browser to try and locate the correct image URL. Give it a shot. If you can't find it, let me know.

Justin Riestra
Justin Riestra
4,904 Points

Derp! Thanks Brandon, easy fix.

But, while I have you on the hook... Is there a simple way to import photos directly from my iPhoto library, bypassing having to upload them to google photos first?

Brandon Leichty
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Leichty
Full Stack JavaScript Techdegree Graduate 35,193 Points

When displaying images on a site, they must be hosted (on the web) somewhere.

If you're creating a web page and testing it locally on your machine, you could direct the "img" tag to something like Destktop/photos/image1.jp (or wherever your images are locally stored). And when you run that page on your machine the images would appear. But if you wanted myself (or the world) to see the linked images, they'd have to be hosted on a web server (such as GoDaddy, Host Gator, etc, etc.) Or in your case Google Photos. If that makes sense?

Justin Riestra
Justin Riestra
4,904 Points

Perfectly! Thanks so much for the help. :)