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

【问题标题】：How to resolve the issue of picture not displaying on web page?如何解决网页不显示图片的问题？
【发布时间】：2017-11-03 05:52:25
【问题描述】：

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

【问题讨论】：

标签： html codepen

【解决方案1】：

看起来好像您正在尝试从计算机中抓取图像以进行显示。您的图片需要托管在互联网上的某个地方才能被查看。

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

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

至于如何实际链接图片，this thread 详细讨论。

【讨论】：