Question

在过去的两个小时里，我一直在拉头发，试图让Github页面显示图像。

我在Jekyll建立了一个个人站点（username.github.io/）我想从中部署项目页面。我制作了一个名为test-class的github存储库，并将其转换为项目页面。 Github可以从username.github.io/test-class托管它，但是它拒绝显示图像。

这是一个基本示例。我有这篇文章：

在Github上看起来像这样：

在本地服务时也是如此：

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

即使浏览器中的一切看起来都很好：

这个精确的系统在我的个人站点（username.github.io）上运行正常。为什么现在地球上失败了？

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

Answer 1

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

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

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

您可以通过告诉baseurl设置_config.yml来告诉github从项目存储库而不是您的个人站点托管页面的 only 方法：

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 。 Jekyll's documents中甚至没有提到baseurl技巧。 Here是更详细的说明。

Answer 2

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

baseurl: /test-class

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

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

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

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

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

![](images/llama.jpeg)

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

Github页面拒绝显示图片

2 个答案: