GitHub Pages RSS源图片不显示及相对URL报错问题求助

我之前搭建Jekyll+GitHub Pages博客时也碰到过一模一样的问题——本地用{{ site.baseurl }}嵌入图片正常，但RSS里全是相对URL错误，图片加载不出来。下面给你几个实用的解决思路，既能满足本地测试的便捷性，又符合RSS的绝对URL规范：

方案1：使用Jekyll内置的absolute_url过滤器（最推荐） #

Jekyll官方提供了absolute_url过滤器，它会自动根据你的_config.yml配置生成正确的绝对URL，完美适配本地开发和线上部署场景：

1. 先确保你的_config.yml里已经正确设置了以下两项：

   url: "http://localhost:4000"       # 本地开发时的URL
   baseurl: "/blog"                   # 你的博客子路径（如果是根域名博客可以设为空字符串）
   

   线上部署时，GitHub Pages会自动识别生产环境，你可以在_config.yml里添加生产环境的配置覆盖：

   production:
     url: "https://yourusername.github.io"  # 你的GitHub Pages域名
   

2. 把模板里的图片链接改成用absolute_url过滤器：

   <img src="{{ '/assets/images/IMG_8196.jpg' | absolute_url }}" alt="图片描述">
   

   这样本地运行jekyll serve时，生成的URL是http://localhost:4000/blog/assets/images/IMG_8196.jpg，本地能正常加载；线上部署后，会自动变成https://yourusername.github.io/blog/assets/images/IMG_8196.jpg，RSS里的图片路径就符合规范了。

方案2：手动拼接绝对URL（适合习惯手动控制的场景） #

如果不想用过滤器，也可以直接在模板里拼接site.url和site.baseurl：

<img src="{{ site.url }}{{ site.baseurl }}/assets/images/IMG_8196.jpg" alt="图片描述">

同样，通过_config.yml的环境配置区分本地和线上的site.url，效果和方案1一致，只是写法稍微繁琐一点。

方案3：修改RSS模板自动替换相对路径（无需修改文章内的图片链接） #

如果你已经写了很多文章，不想逐个修改图片链接，可以直接修改RSS的生成模板，自动把内容里的相对URL转换成绝对URL：

1. 如果你用的是官方的jekyll-feed插件，可以在_config.yml里添加配置：

   jekyll_feed:
     transform:
       - selector: img
         attributes:
           src: "{{ site.url }}{{ site.baseurl }}{{ value }}"
   

2. 如果是自定义的RSS模板（比如_layouts/rss.xml），可以在生成description时用Liquid的replace过滤器替换路径：

   <description>
     {{ post.content | replace: 'src="/', 'src="' | append: site.url | append: site.baseurl | append: '/' | xml_escape }}
   </description>
   

   这段代码会把所有<img src="/xxx.jpg">的相对路径替换成src="https://yourdomain.com/xxx.jpg"的绝对路径。

验证步骤 #

修改完成后，运行jekyll build生成静态文件，然后用RSS验证工具检查是否还有相对URL错误，同时可以把生成的feed.xml导入到RSS阅读器里测试图片是否能正常显示。

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