为什么网页上有一个破碎的img

Question

我刚开始学习html，我正在通过github创建一个自我介绍网页。 这是一个问题： 我在我的电脑上打开了html文件（一个网页），它完美地显示了图片，但是当我通过github打开页面时，img被打破了。这里的问题是什么？ 非常感谢

<!-- this is the code for the picture !-->
<div id="main">
    <div class="picture"><img src="/Users/shuai9532/Documents/img/IMG_1665.jpg"/>
</div>

Answer 1

您有一个由绝对路径组成的网址（即以单个/开头的网址）。它是相对于当前站点的根进行解析的。

在本地打开它时，它会从文件系统的根目录解析。

当您通过HTTP服务器打开它时，它将从主机的根目录解析。

Github托管网站上不存在该图像（或者，如果不存在，则不在相同的相对位置）。

Answer 2

问题在于您使用的相对链接仅在图像链接上传到服务器（或本例中为Github）后仍然有效时才起作用。我不确定GitHub，但请确保相关链接正确或者尝试ABSOLUTE LINK（通过在imgur.com之类的免费图像托管上托管图像并获取其http://i.imgur.com/d1JHPRq.jpg等绝对链接您甚至可以尝试将此图像放在 src 属性中，以确保服务器上的该页面可以访问该图像。

可以找到有关绝对和相对链接的更多信息here。