Jekyll部署至GitHub Pages后Google Maps点击式图片无法显示求助

一、GitHub Pages图片不显示的原因及修复 #

你遇到的图片加载问题，核心是图片路径配置错误，具体细节如下：

1. 错误的资源URL：你使用的https://github.com/veteranssafaris/veteranssafaris/blob/master/assets/google_maps.png是GitHub仓库的文件预览页面链接，而非直接的图片资源文件链接。当GitHub Pages尝试加载这个URL时，它获取到的是网页内容而非图片，自然无法正常显示。

2. 本地与线上路径差异：本地运行Jekyll时，服务器根目录直接对应你的仓库根目录，/assets/google_maps.png能正确指向仓库内的图片；但你的GitHub Pages是项目站点（URL为https://veteranssafaris.github.io/veteranssafaris/），站点根目录是/veteranssafaris/，直接用/assets/会指向https://veteranssafaris.github.io/assets/，而你的图片实际存储在/veteranssafaris/assets/路径下，因此无法找到资源。

修复方案 #

方案1：使用Jekyll的baseurl变量（推荐）

Jekyll内置了site.baseurl变量，会自动适配项目站点的路径。把图片链接修改为：

<a href="https://maps.google.com/maps?ll=-1.501633,29.631358&amp;z=12&amp;t=m&amp;hl=en-US&amp;gl=RW&amp;mapclient=embed&amp;cid=17550833976507367943">
  <img src="{{ site.baseurl }}/assets/google_maps.png" alt="Google Maps preview" width="288" height="184" />
</a>

这样本地运行和GitHub Pages上线后，都会自动生成正确的资源路径，无需手动调整。

方案2：使用绝对路径或raw资源链接

如果你不想依赖Jekyll变量，也可以直接写站点的绝对路径：

<img src="/veteranssafaris/assets/google_maps.png" alt="Google Maps preview" width="288" height="184" />

或者使用GitHub的raw资源链接（直接指向图片文件）：

<img src="https://raw.githubusercontent.com/veteranssafaris/veteranssafaris/master/assets/google_maps.png" alt="Google Maps preview" width="288" height="184" />

二、关于带宽节省与碳排放减少 #

你的方案完全可以有效节省带宽、降低碳排放，原因如下：

• 原Google Maps嵌入会一次性加载大量资源：包括地图瓦片、JavaScript脚本、样式文件等，即便用户不需要交互，这些资源也会被强制加载。
• 替换为静态图片后，仅在页面加载时请求一张体积远小于Maps资源的图片；只有当用户主动点击时，才会打开Maps页面并加载相关资源，避免了大量不必要的带宽消耗。

带宽消耗的减少直接对应数据中心能耗的降低——数据中心是碳排放的重要来源之一，因此这种按需加载的方式确实能间接减少碳排放，是一种环保的优化手段。

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