Github 页面拒绝显示图片

Question

在过去的两个小时里，我一直在努力让 Github 页面显示图像。

我在 Jekyll 中创建了一个个人网站 (username.github.io/) 我想从中部署项目页面。我制作了一个名为 test-class 的 github repo 并将其变成了一个项目页面。 Github 从 username.github.io/test-class 托管它就好了，但它拒绝显示图像。

这是一个基本示例。我有这个帖子：

在 Github 上看起来像这样：

当我在本地服务时就像这样：

但它没有显示在 Github 页面上：

即使在浏览器中一切看起来都不错：

这个确切的系统在我的个人网站 (username.github.io) 上运行良好。为什么它现在失败了？

编辑：我应该注意我已经尝试了几个不同的路径名，但都没有工作。我什至尝试将图像放在与降价文件完全相同的文件夹中。那也行不通。

Answer 1

您的网页/网站位于子文件夹（测试类）中。您通常会使用{{ site.baseurl }} 变量来引用它。这应该像这样在_config.yml 文件中设置（只需将此行添加到文件中）：

baseurl: /test-class

图像链接仍然需要在其路径中包含此 baseurl，因此您仍然必须编写：

![](/test-class/images/llama.jpeg)

... 或者（更好）类似 yuyokk 的建议 here:

![]({{ site.baseurl }}/images/llama.jpeg)

此命令指示服务器查看域的根目录（第一个斜杠）和子文件夹“test-class”。应该存在一个文件夹 images，其中包含一个文件 'llama.jpeg'。

---

![](images/llama.jpeg)

请注意，上述命令可能也适用于主页，因为它指示服务器查看当前页面位置的子文件夹“images”。对于任何其他页面，这可能会失败，因为它们可能具有不同的路径（另一个虚拟或真实文件夹）。

Answer 2

到目前为止，我发现的唯一解决方案是引用托管图像：

![](https://username.github.io/test-class/images/llama.jpeg)

编辑。昨晚当我试图解决另一个我认为不同但实际上相同的问题时，我找到了解决方案。事实证明，github页面中的相对链接非常棘手。 This github bug post 回到 2011 年指出了这一点。

唯一您可以告诉 github 托管来自项目存储库而不是您的个人站点的页面的方法是在您的 _config.yml 中设置 baseurl：

baseurl: test-class/

然后为每个 image 链接命名（使用我的示例）

![]({{site.basurl}}/images/llama.jpeg)

同时

![](test-class/images/llama.jpeg)

不会工作。

baseurl 规则适用于所有链接。例如，如果您创建一个collection 并尝试创建一个包含指向该集合中所有页面的链接的索引，您必须明确引用 baseurl：

{%- for tutorial in site.tutorials -%}
    <li>
        <a href="{{ site.baseurl }}{{ tutorial.url }}">
        {{ tutorial.title | escape }}
        </a>
    </li>
{%- endfor -%}  

除了现在你需要删除尾随/。

虽然现在这似乎很明显，但 Github 文档可以更好地解释项目页面和个人网站如何协同工作。

编辑 2。 baseurl 技巧甚至没有在 Jekyll's documents 中提及。 Here是更详细的解释。