在托管于Github的网站上，图片无法加载

Question

我上传了一张图片，并使用正确的扩展名和链接将其链接到HTML文件。即使如此，该图像仍未显示。

这是我的网站链接- http://valaparthvi.github.io/ 以及我的github个人资料链接- https://github.com/ValaParthvi/valaparthvi.github.io 这里出了什么问题？有哪些可能的解决方案？

- Parthvi Vala

---

请使用此链接：http://valaparthvi.github.io/DSC_07321.resized.png，而不是http://valaparthvi.github.io/home/parthvivala/valaparthvi.github.io/DSC_07321.resized.png。 - Chaim

控制台显示资源不存在。 - Andrew Li

Answer 1

该图片的源代码包含您的主目录 (/home/)。世界上没有其他人知道这个。您需要提供一个适当的URL，以供网络浏览器访问。该图片的URL为：//raw.githubusercontent.com/ValaParthvi/valaparthvi.github.io/master/DSC_07321.resized.png。

请注意，当您将网站上传到GitHub时，它会将所有文件存储在那里。所有这些文件的路径必须可由互联网上的某个人访问。希望我无法访问您的主目录。

GitHub页面还提供了更方便、与分支无关的URL。对于您的图片，它将是/DSC_07321.resized.png。这样做的好处是不定义源，所以它可以在本地和部署后正常工作。在另外两种情况下，无论是使用您的主目录还是使用完整的GitHub URL，您都在使用绝对URL，这不会跨多个来源正常工作。

- Jamie Counsell

---

我不知道GitHub如何处理媒体文件。我会记住你说的话，现在它正在工作，我现在可以看到图片了。谢谢！ - Parthvi Vala

Answer 2

Jamie Counsell有关于这张图片的答案：

<img src="/DSC_07321.resized.png" />

I would also remove

img {
  padding-left: 1000px;
}

而是将<img src="/DSC_07321.resized.png">用一个带有text-align: right的<div>标签包围起来，这样它在不同的屏幕尺寸上看起来都很好。 像这样：

<div style="text-align: right;">
  <img src="/DSC_07321.resized.png" alt="profile picture">
</div>

希望这可以帮到你。

- Trevor Nestman

Answer 3

您的图像源代码有误，请尝试使用以下代码：

<img src="//valaparthvi.github.io/DSC_07321.resized.png">

- BrianR