在 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

将

url

配置添加到 _config.yml，并在加载图像时在模板中使用该键。

使用 github 页面 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;" />

Answer 2

在 GitHub io 页面上，以下语法对我有用：

<img src="images/equation-1.gif"/>