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

Question

我是 HTML 的新手。使用 www.Codepen.io 网站，我创建了一个网站，使用 HTML 生成了几个 .png 图片，headers 和段落。但不幸的是，网站上的所有内容都在生成，但图片除外。我不确定为什么。我们是否需要将 .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

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

Codepen.io 确实提供资产托管，但前提是您拥有 Pro 会员资格。 link 对此进行了更详细的介绍： https://blog.codepen.io/documentation/pro-features/asset-hosting/

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

至于如何实际link图像，this thread详细讨论。

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

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

html

codepen