Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Working on the tribute project, when I try to input my image it only shows up as an image icon instead of displaying the actual image. I tried inputting one of the images from a previous project and it worked. How can I get my images to load?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Casper Destroyer 3000 Yager</title>
    <link rel="stylesheet" href="./styles.css"
  </head>
  <body>
    <header class="header">
      <h1>Casper Destroyer 3000 Yager</h1>
      <div class="image">
        <img id="freecodecamp-image" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
        <img id="my-image" src="https://imgur.com/VTyyv1I"
      </div>
    </header>
  </body>

/* file: styles.css */
.title {
  
}

#image {
  display: block;
  height: auto;
  max-width: 100%;
  display: flex;
justify-content: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hi there!
Close the img tag, then right click on the picture on Imgur, copy image address, like this https://i.imgur.com/VTyyv1I.jpeg, and use it as your src
In other words, you need a direct link to the picture

1 Like
3

Thank you so much! I see it wasn’t auto putting the .jpeg part in. I appreciate you!

1 Like