在 GitHub Pages 上包含图像的正确方法是什么？

Question

免责声明：我搜索过SO，发现类似的问题（例如：URL），主要建议注意名称的大小写差异，但他们没有解决我的问题。

不久前，我创建了一个 GitHub 页面，写了我的第一篇文章，并在其中包含了一些图像。推荐的包含图像的方式是相对链接，例如：

<img src="./images/equation-1.gif" style="display: block; margin: auto;" />

但是，这种方式图像仅显示在 GitHub 存储库内，而不显示在 GitHub 页面上。因此，我将它们替换为 GitHub 存储库中图像所引用的直接链接，如下所示：

<img src="https://github.com/KubaMichalczyk/kubamichalczyk.github.io/raw/master/_posts/images/equation-1.gif" style="display: block; margin: auto;" />

它奏效了。然而，这只是乍一看，几天后所有链接都崩溃了。从那时起，这些图像大部分时间都会显示，但有时链接会损坏。不幸的是，我不知道为什么会这样，我想一劳永逸地修复它。因此，我的问题是在 GitHub 页面上包含图像的正确方法是什么？为什么相对链接实际上不起作用？存储库是私有还是公共有关系吗？

我的页面地址在这里，存储库位于这里。

Answer 1

根据您的域kubamichalczyk.github.io，您正在使用用户和组织页面站点。

正确的方法是添加一个url配置到_config.yml您的生产URL，并在加载图像时在模板中使用该键。

使用 github 页面 gem

确保您使用的 Github Pages gem 与您的生产环境同步，而不依赖于您的本地配置

     $ bundle init

在Gemfile：

source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins

安装正确的 Jekyll 版本：

$ bundle install

然后始终使用以下命令运行 jekyll bundle：

$ bundle exec jekyll serve

添加网址

在_config.yml：

url: https://kubamichalczyk.github.io/

图片文件夹

图像不应该位于_posts文件夹内，它们应该位于根目录下：

/images

参考图像

在帖子中使用上述配置，以便在开发时和生产中使用您的 Github 页面站点 urlurl替换它：localhost{{site.url}}/images/equation-1.gif

<img src="{{site.url}}/images/equation-1.gif" style="display: block; margin: auto;" />