如何解决图片无法在网页上显示的问题？

Question

我是HTML新手。使用www.Codepen.io网站，我使用HTML创建了一个网站，以生成几个.png图片，标题和段落。但不幸的是，网站上的所有内容都在生成，但图片却是如此。我不知道为什么。我们是否需要将.png文件放在.html文件所在的区域？如果我们确实需要从Codepen保存.html文件，我们该怎么做？我在编写脚本时做错了吗？

请参阅附件以供参考：

<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>

Answer 1

好像您正试图从计算机中抓取图像进行显示。您的图像需要托管在互联网上的某个位置才能被查看。

Codepen.io确实提供资产托管，但前提是您拥有专业版会员资格。这个链接更详细： https://blog.codepen.io/documentation/pro-features/asset-hosting/

图片不需要与html文件位于同一位置。 在Web开发中，通常的做法是为图像提供自己的文件夹，以便所有图像都位于同一位置。 This thread讨论了网站结构的最佳做法。

至于如何实际链接图像，this thread详细讨论了这一点。