Trouble loading Images to HTML

HTML-CSS
1

Tell us what’s happening:

alrighty, having issues getting my image to attach (correct path) to my html. Tried copying path straight from web page, and doing a relative from my desktop after downloading it. is there something simple i’m missing? please Halp.

Your code so far

        <script src="https://codepen.io/freeCodeCamp/pen/MJjpwO"></script>
<!DOCTYPE html>
<html>
  <head>
    <style></style>
  </head>
  <body id="main">
    <main>
      <h1 id="title">Anthony Bourdain</h1>
      <p>Pour some out for the real ones</p>
      <div id="img-div">
      <figure>
        <img id="img" src="/Users/Monarch/Desktop/image.jpeg" alt="Anthony siting on a lounge chair of a rocky shore"/>
        <figcapture id="img-caption">"Known for his raw take on what its realy like in the restaurant industry"</figcapture>
      </figure>
      </div>

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

https://codepen.io/freeCodeCamp/pen/MJjpwO

2

Hi @monarch.rd!

Welcome to the forum!

The path looks right to me.

But the bigger issue is that you need to host this image somewhere or else we are not going to be able to see it in your final project.

There are tons of free hosting options you can choose from.

Or you could also just grab an image from google of Anthony Bourdain and copy the image address and not have to worry about hosting at all.

1 Like
3

Hey @monarch.rd

The issue over here is that you have give the path of your laptop as the image is stored on it. For you to see it on the website try using a URL from image.google.com at it will work perfectly fine.

1 Like