GitHub Pages特殊格式URL下Readme图片无法显示的原因及解决办法

原因 #

核心问题是GitHub的跨域资源加载限制：

• 像myorganisation.github.io/my-repo这种属于组织/用户级Pages域名下的仓库路径，GitHub允许github.com主站（即Readme所在页面）加载这类路径下的资源；
• 而funky-einstein-lala.pages.github.io属于仓库独立的Pages子域名，GitHub为了安全，默认限制了github.com主站从这类子域名加载图片资源，哪怕图片确实存在，浏览器也会因跨域策略拦截请求。

解决办法 #

1. 改用仓库分支的Raw地址加载 #

直接把SVG文件放到仓库的主分支（比如main或master）里，用GitHub的Raw链接引用，格式如下：

![覆盖率徽章](https://raw.githubusercontent.com/[你的用户名]/[仓库名]/[分支名]/jacoco.svg)

这种方式完全避开Pages的跨域限制，是最稳妥的方案。

2. 绑定自定义域名到GitHub Pages #

如果一定要用Pages的URL加载，给这个仓库的GitHub Pages绑定一个自己的自定义域名（比如coverage.yourdomain.com），绑定完成后用自定义域名的URL引用SVG：

![覆盖率徽章](https://coverage.yourdomain.com/jacoco.svg)

GitHub允许主站加载自定义域名下的Pages资源，不会触发跨域拦截。

3. 转换SVG为PNG后使用 #

如果上面两种方式都不想用，可以把SVG转换为PNG格式，上传到仓库或者Pages，再引用PNG文件——PNG的跨域限制相对宽松，但会失去SVG的矢量特性。

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