解决Halo博客文章中gitee外链图片无法显示的问题

前言

在使用 Halo 博客平台撰写 Markdown 文章的过程中，我遇到了一个令人困扰的问题：文章中的图片链接来自 Gitee 图床，但在 Halo 博客中却无法正常加载显示。

一、问题现象

具体表现如下：

我使用的是 PicGo 配合 Typora，在本地写 Markdown 时上传图片至 Gitee 图床；
在本地预览（Typora）中，图片正常显示；
将 Markdown 文件直接上传到 CSDN 等平台时，图片也能显示；
直接用浏览器打开 Gitee 图床链接，图片可以访问，无需登录；
但在 Halo 博客中发布文章后，图片全部加载失败，呈现空白。

二、本质原因

经过一番搜索与排查，我发现这是由 Gitee 图床开启了防盗链机制 导致的。

简单来说，Gitee 只允许浏览器直接访问其图片链接，但禁止其他网站通过 <img> 标签引用其图片，以防止盗链滥用。

而 Halo 博客在展示文章时，会从其他源（如 CDN 或独立域名）加载页面内容，此时发送图片请求的 Referer 不是 Gitee 允许的来源，从而被阻止加载。

2.1 防盗链是什么?

防盗链不是一根链条，正确的停顿应该是防、盗链——防止其他网站盗用我的链接。

我把图片上传到gitee的服务器，得到了图片的链接，然后拿着这个链接在第三方编辑器中使用，这就是在“盗用”——因为这张图片占用了gitee的服务器资源，却为第三方编辑器工作，gitee得不到好处，还得多花钱。

2.2 如何实现防盗链?

参考博客：使用gitee搭建图床，并解决防盗链问题_gitee上传图片,浏览器能访问吗-CSDN博客

要实现防盗链，就需要知道图片的请求是从哪里发出的。可以实现这一功能的有请求头中的origin和referer。origin只有在XHR请求中才会带上，所以图片资源只能借助referer。其实gitee也确实是这么做的。

通过判断请求的referer，如果请求来源不是本站就返回302，重定向到gitee的logo上，最后在第三方网站引用存在gitee的资源就全变成它的logo了。

可以在开发者工具中看到第三方网站请求gitee图片的流程：