Help! Picture is on the webpage, but won't show correctly

1

Here’s my portfolio webpage, so far…

Why won’t the photo of Reagan at the bottom show correctly?

Thank you.

2

The link to the picture you use in your src seems to be the issue. This link to the image location: https://lh5.googleusercontent.com/_kPI0_I-59V8YDY23NLv0-j0FQg_WwZeGsi-fwbN3lnYLX0boX5UACSNfvvZn-I665KSOaQz=w1920-h947 displays the image in your page.

Here’s the full tag:

<img src="https://lh5.googleusercontent.com/_kPI0_I-59V8YDY23NLv0-j0FQg_WwZeGsi-fwbN3lnYLX0boX5UACSNfvvZn-I665KSOaQz=w1920-h947" alt="Thumbnail image of a tribute page to President Ronald Reagan." >
3

I copy and pasted that, and it’s still not showing. Hmmm…

4

That’s odd, it shows up for me.

5

This one detail is driving me crazy! lol

Thank you for your help. I’m not sure why this just won’t show. I added a second link for the next image and it worked perfectly.

6

Also, just checked again and you’re missing a " after ‘row’ in your class:

<div class="thumbnails row>
7

I just saw that, too. Fixed it. Thanks :slight_smile:

8

for reference this is what your page looks like from my end at the moment

Capture.PNG1752×843 191 KB

9

Okay. Cool. It’s there, just won’t make an appearance on my view.

I’m going to move on for now, work on adding three other images in two columns, with titles centered above. The code for the image is right, so I’m not going to drive myself crazy any more tonight.

Thank you very much for your help. Have you been doing this long? I’ve only been in it for 2-3 weeks. I really enjoy it, but these moments get to me. I’ll keep chugging along.

Melanie

10

It doesn’t show up for me on Chrome nor Firefox, so it’s not just you.

Use this link instead:

http://drive.google.com/uc?export=view&id=0B5G-AzHYvvV5N3Q5MUFuUnlVa1E

This link specifically tells Google to isolate the image instead of opening it in a viewer.

11

The main reason is that your image is not an image. I mean the link is pointing to a webpage instead of an image. Try to open the image in a new tab and inspect it with the dev tool. The actual image link is not https://drive.google.com/open?id=0B5G-AzHYvvV5N3Q5MUFuUnlVa1E, but https://lh3.googleusercontent.com/C-ICHeSioC4UyGVdaEPZZ35NQdzJsT98bZtocA8iYEMzzzTcsOppIfK_vp2Nx4UpSK4nsnBSOi-h9UA=w1603-h571

12

You win the prize!! Thank you :smile:! I struggled with that for days. Thank you for taking the time to help me out.

Have an amazing weekend.

Melanie

13

I understand what you are saying about the image. How would you recommend getting an image (screen shot) off my computer onto the online text editor, like Codepen?

I read enough to see that this will be much easier when I am using a text editor that I run from my lap top, keeping the files in the same folder and such.

Learning lots!! Thank you so much for taking the time to help me out. I really appreciate it!!

Have a fabulous weekend!

Melanie

14

You should upload your images to a hosting service and then use that url in your tags. You should NOT link directly to an image on someone else’s site.

http://altlab.com/hotlinking.html

1 Like
15

I don’t know what other people use around here, but I’ve been using imgur. You can use pretty much any online photo hosting service, except for Google Photos/Drive, which doesn’t provide a direct link as you learned :slight_smile:

16

That is very good to know. In this case I was linking to my own google photo, but now that I think about it, I got that original photo of Reagan online, as well as the two clip arts.

Crap. Why isn’t this a lesson on FCC early on? They hook us up with Codepen, why not a free image hosting service?

Thank you for helping.

Melanie

17

I have learned that :slight_smile: . Question is, why doesn’t FCC address this early in the program? I got that original image of Reagan from an online link, as well as the two clip art images. Now I’ve learned that is not legal.

Thank you for helping out.

Melanie

18

I just visited imgur and opened an account. I found an image that worked for my Tribute page and now can’t figure out how to link it. I used the link given for “imbed post” and it is not working. I even tried to carve out just what seemed necessary from that link and I’m still getting nothing. Is there something else I’m missing?

19

I found this free image hosting service, and it’s working beautifully on my two projects.

20

You’ll want to use what they call the “direct link”, then insert that into your <img> tag.