Build a tribute page: why does it not show my image?

HTML-CSS
1

I am trying to include a .jpg image from my C: drive into the project, but it shows my alt-text instead of my photo.

Alternatively (here below) I have picked a random image online, copied the URL and inserted it. However, it does the same: just the alt text. Messing around in the CSS changes nothing - making it smaller, auto fit, deleting all of the CSS… no reaction. What am I doing wrong…? I have finished the requirements for the project, it checks all the boxes. I could just move on without fleshing out the assignment, but that is sort-of useless, isn’t it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0" />
    <meta name="description" content="tribute page Alf and Milo" />
    <title id="title">ALF AND MILO</title>
    <link rel="stylesheet" href="styles.css" />
    </head>
  <main id="main">
<div id="img-div">
  <img id="image" src="https://images.app.goo.gl/jJ8Xm9SvhEd7UNvZA" alt="WHERE IS THE IMAGE!?">
  <figcaption id="img-caption">Alf and Milo - kiss your favorite animal</figcaption>
    </div>
<p id="tribute-info">CONTAINS TEXTUAL CONTENT</p>
<a id="tribute-link" target="_blank" href="https://www.shecodes.io/athena/4835-how-to-insert-an-image-from-folder-in-html">link to page</a>
    </main>
    </html>
2

Hello!

The picture doesn’t show up because you are linking to the google results page.

Try the following:

  • Go to the search results
  • right click on the image and choose “open image in new tab”
  • go to the tab and copy the URL
    image
    image1022×629 61.6 KB

Use the new URL as the link and the image should appear.

1 Like
3

Thanks much, @DanielHuebschmann, that solves it indeed.

I assume including an image from the C: drive is simply not going to work with the FreeCodeCamp interface and I should have it online somewhere for that to function?
That was my “original” issue - only after that I tested with an online one as per above :slight_smile:
Have a great weekend.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.