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

问题描述

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

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

_includes

接下来,我在根目录的 <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> 目录中为帖子添加一个新的 Markdown 文件。我正在尝试在 .md 帖子文件中包含一个图像,如下所示:

_posts

但是,提交和代码推送到 GitHub 存储库后,GitHub 页面无法显示图像。 Click here to see the image display error链接到我在 Github 存储库上的代码:- https://github.com/Ritobrato/testBlog

在stackoverflow 上阅读了所有类似的问题后,这似乎是一个文件链接问题。请帮忙!谢谢

解决方法

您的 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)