图片防盗链导致图片无法加载解决方法

我们在博客的时候可能最烦心的就是图片处理了

比如我在本地写好博客后把文章发布到博客园，或者CSDN或则和其他平台

但是文章中用到的图片需要一个个手动上传，费时费力

而且由于图片防盗链的存在，各博客平台上的图片资源又不能直接引用

image-20240711170057836

解决方案也很简单，只需要在博客生成的html页面头文件中引入一下代码片段即可

1
<meta name="referrer" content="no-referrer" />

以hexo博客为例（我的主题是ayer，不同主题存放位置有细微差别）

打开主题资源目录，一般在layout目录下找 header.pug 或者 header.ejs 文件

image-20240711170107280

若为 header.ejs 添加以下代码

1
<meta name="referrer" content="no-referrer" />

image-20240711170112756

若为 header.pug 则需要添加以下内容

1
meta(name="referrer" content="no-referrer")

image-20240711170117882

然后重新生成以下网页内容

1
hexo g

可以发现生成的网页文件中已经包含刚才添加的这行代码

image-20240711170123175

此时再重启服务，所有图片就能正常预览了

image-20240711170127848

当然，引用其他网站的资源其实是很一件很不道德的事情，尤其是盗用他人图片的

推荐一个更好的解决方案，那就是使用图床

参考

解决hexo引入图床，手机和web不显示图片的问题

相关推荐

基于博客园搭建Typora免费图床

基于CSDN搭建Typora免费图床

PicGo搭建免费图床实现Typora图片自动上传

Typora 图片自动上传至腾讯云Cos 服务