如何解决网页上图片不显示的问题？

Question

我是HTML的新手。使用www.Codepen.io网站，我创建了一个使用.png生成两个.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将对此进行详细讨论。