Github 页面上的图像显示错误 - 使用 Jekyll

Question

我想使用 Jekyll 托管一个带有 Github 页面的简单博客站点。 在帖子中，我想显示图像。 为此，我在项目目录的根目录中的_includes文件夹中添加了一个image.html文件。

我在 image.html 文件中构建了一个 HTML 结构，如下所示：

<figure class="image" style="display: flex; flex-direction: column; align-items: center; justify-content: space-between">
<img src="https://raw.githubusercontent.com/Ritobrato{{include.baseurl}}/gh-pages/_posts" alt="{{ include.description }}">
<div style="padding-top: 10px"></div>
<figcaption>{{ include.description }}</figcaption></figure>

接下来，我在根目录下的_posts目录中为帖子添加了一个新的 markdown 文件。 我正在尝试在 .md 发布文件中包含一个图像，如下所示：

{% include image.html url="/images/trek1.jpg" description="This is a trek image" %}

但是，在提交和代码推送到 GitHub 存储库后，GitHub 页面无法显示图像。 单击此处查看图像显示错误。 链接到我在 Github repo 上的代码：- https://github.com/Ritobrato/testBlog

在阅读了关于 stackoverflow 的所有类似问题后，这似乎是一个文件链接问题。 请帮忙！ 谢谢

Answer 1

您的img标签上的src属性看起来有问题（不指向图像或使用include.url ）：

src="https://raw.githubusercontent.com/Ritobrato{{include.baseurl}}/gh-pages/_posts"

我不能确定你想在哪里指出这一点，但由于这是一个 Jekyll 站点并且你正在将url传递给你的包含，我会说它应该是：

src="{{ site.baseurl }}{{ include.url }}"

---

或者，如果您不需要使用figure元素，则可以在 Markdown 文件中添加图像，而不是使用包含：

![This is a trek image]({{ site.baseurl }}/images/trek1.jpg)