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

Posted 2023-03-28

【中文标题】Github 页面上的图像显示错误 - 使用 Jekyll

【英文标题】：Image display error on Github pages - Jekyll used

【发布时间】：2021-08-25 14:40:18

【问题描述】：

我想使用 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/Ritobratoinclude.baseurl/gh-pages/_posts" >
<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 页面无法显示图像。 Click here to see the image display error。 链接到我在 Github repo 上的代码：- https://github.com/Ritobrato/testBlog

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

【参考方案1】：

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

src="https://raw.githubusercontent.com/Ritobratoinclude.baseurl/gh-pages/_posts"

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

src=" site.baseurl  include.url "

---

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

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

【讨论】：

您好@Ross 感谢您的帮助。但是，仍然无法显示来自 Github 存储库的图像，但它可以在本地工作。一切都很完美，除了图像中断。

看起来你的图片扩展是大写的 - 所以你需要重命名它或在降价中将其更改为![This is a trek image]( site.baseurl /assets/trek1.JPG)

你好@罗斯！所以，我想通了。原来我正在研究 gh-pages 分支，所以我的文件遇到了路由问题。用'/path/to/my/image.jpg' | relative_url 解决了这个问题，这个过滤器解决了这个问题。在主分支上/path/to/my/image.jpg 路由解决了这个问题。对于这两个，我在 _includes 目录中放置了一个 image.html 文件，并在 md 中调用它。但是，直接从 md 调用图像是行不通的，不知道为什么！