How to resolve the issue of picture not displaying on web page?

I am new to HTML. Using www.Codepen.io website, I created a website using HTML to produce a couple of .png pictures, headers and paragraphs. But unfortunately, everything in the website is generating but the pictures. I am not sure why. Do we need to have the .png files in the same area as where the .html file is located? If we do need to save the .html file from Codepen, how do we do so? Am i doing something wrong while writing the script?

Please see attachment for reference:

<div>
 <h1>Rohit's page of Interests</h1>
 <img src = "/Users/Roys_laptop/Desktop/Java/java_logo.png" id = "Java logo" />
 <p>My aim is to become a Java Developer one day.</p>
</div>
<div>
 <h1>My Interests</h1>
 <img src = "/Users/Roys_laptop/Desktop/Java/nfl_logo.png" id = "NFL 
  logo" />
 <p> I am a very big football fan. I love and root for the Cinncinnati 
  Bengals </p>
 <img src = "/Users/Roys_laptop/Desktop/Java" id = "Cinncinnati Bengals" />
</div>