在 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 页面上包含图像的正确方法是什么？为什么相对链接实际上不起作用？存储库是私有的还是公共的有关系吗？

我的页面地址是here，仓库位于here。

Answer 1

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

执行此操作的正确方法是使用您的生产 url 将 url 配置添加到 _config.yml，并在加载图像时在模板中使用该键。

使用 github pages gem

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

     $ bundle init

在Gemfile:

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

安装正确的 Jekyll 版本：

$ bundle install

然后始终使用 bundle 运行 jekyll：

$ bundle exec jekyll serve

添加网址

在_config.yml:

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

图片文件夹

图片不应该在_posts文件夹中，它们应该在根目录：

/images

参考图片

在帖子中使用上述 url 配置，因此在开发时它将被 localhost 替换，并且在生产中使用您的 Github 页面站点 URL {{site.url}}/images/equation-1.gif：

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