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

决定使用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生成相关的文件。
由于各个主题差异很大，就不便明说了。
适合高玩。