时间戳

首页 > 解决方案 > Github 页面上的图像显示错误 - 使用 Jekyll

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

问题描述

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

我在 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在根目录中为帖子添加了一个新的降价文件。我正在尝试在 .md 发布文件中包含一个图像，如下所示：

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

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

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

标签： ruby-on-railsrubygithubjekyllgithub-pages

解决方案

标签上的src属性img看起来有问题（不指向图像或使用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)

推荐阅读