GitHub Pages图片添加失败求助及解决方案原理咨询

首先得给你理清核心问题：你遇到的路径混乱，本质是Jekyll的路径解析规则和你用docs作为GitHub Pages源目录、设置categories这两个特殊场景叠加导致的。

为什么你之前试的方法都不行？ #

• 带docs的绝对路径写法：{{ site.url }}/{{ site.baseurl }}/docs/images/...
  GitHub Pages把docs设为构建源目录后，Jekyll会直接把docs里的所有内容（包括images、_posts）放到站点的根目录下（对应site.baseurl之后的位置），所以路径里根本不该出现docs——你写了docs就等于多了一层不存在的目录，自然找不到图片。

• 相对路径../images/...：
  因为你给文章加了categories: machine learning，Jekyll默认会把文章生成到/machine learning/LSTM-and-its-variants/这个路径下（不管你本地存在docs/_posts）。这时候你用../，是从文章的生成路径往上跳一级，也就是到/machine learning/目录，再拼上images/...就变成了/blog/machine learning/images/...（假设你的site.baseurl是/blog），但你的实际图片在/blog/images/...，所以肯定找不到。

• 移除categories后文章找不到：
  这是因为之前Jekyll是基于categories生成文章URL的，移除后生成的URL变了，你还是用旧的URL访问自然会404。不过这是次要问题，核心还是图片路径的问题。

为什么{{ '/images/lstm/architecture.png' | absolute_url }}能解决？ #

这要归功于Jekyll内置的absolute_url过滤器，它的作用就是帮你自动生成适配站点配置的正确绝对路径，逻辑很简单：

1. 它会读取你配置里的site.url和site.baseurl（比如site.url是https://yourusername.github.io，site.baseurl是/blog）
2. 把你传入的路径（/images/lstm/architecture.png）和上面两个值拼接，最终生成https://yourusername.github.io/blog/images/lstm/architecture.png——这正好是图片的真实路径（因为docs/images构建后就是/blog/images）
3. 最关键的是，这个路径是绝对路径，不管你的文章生成在哪个子目录（比如带categories的深层路径），它都不会受影响，永远指向正确的位置。

简单说，这个过滤器帮你避开了手动拼接路径容易犯的错误（比如多写docs、没考虑baseurl、相对路径基准变化），直接利用Jekyll的内置逻辑生成正确路径。

内容的提问来源于stack exchange，提问作者Maybe