某日,更新博客主题,为了优化图片的加载速度。

决定使用B站作为图床,通过引用图片链接的方式,

来达到优化博客图片的目的。

结果发现图片无法显示。


运行环境 Runtime environment

1
2
3
4
5
操作系统: Windos10  
IDE: webStrom 2021.3.1 x64
语言: nodeJs v14.15.4
框架: hexo "5.3.0"
theme: [Butterfly "3.6.1"]

症状

bilibili上的图片地址,都是以此域名开头

https://i0.hdslb.com

按F12,通过浏览器开发工具可以看出。

在外链引用图片链接的时候,凡是这个地址的图片都会403。

1
https://i0.hdslb.com/bfs/album/89cad6a27ea92985a463342334b0933be8d843e2.jpg

但是使用其他图床的图片地址,图片能够正常显示。

问题原因

经过对比,初步认定bilibili的图床做了防盗链。

Hexo 博客在引用图片链接的时候可能携带了refer的请求头。

照着这个思路,寻找解决办法。

解决办法

方法 1

将这一行html,写到自己博文的前面,即可。
markdown 语法在渲染时,会直接将该html语句加到博文页面上。

方法 2

该方法比较复杂,但是原理与 方法 1 相同。

某些hexo主题支持直接给所有页面添加特定代码段的设置。

例如: butterfly

1
2
3
4
5
6
7
8
9
10
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <meta name="referrer" content="same-origin"/>

bottom:
# - <script src="xxxx"></script>

如果自己使用的主题,没有相关设置。
可以直接进入主题文件中修改与_post生成相关的文件。
由于各个主题差异很大,就不便明说了。
适合高玩。