解决hexo博客不能显示图床图片问题
刚搭建好了hexo博客,写了一篇带图的文章,结果发现图挂了…之前看博客扫到hexo博客显示本地图片可能会有问题,于是选了图床图片的方式插图,结果还是没能幸免,好在搜索了半天,解决了这个问题,这里做个记录,帮助后面遇到问题的同学。
解决方案:
问题情境:
在自己电脑的Chrome浏览器查看博客,正常显示图片,切换到Safari、火狐浏览器图片挂了。 手机端各浏览器均显示不了图片。
解决步骤:
- 分析
-
检查图床图片的链接:
点进去发现图片正常显示,排除图床服务器问题。
-
用Chrome打开博文,右键检查或者查看网页源码:
找到图床图片链接,点击发生403(Forbidden)错误,找到问题根源。
-
解决
403 forbidden,说明了这个网络资源这样获取是被拒绝的,那么通过简单的谷歌,找到了相关的解决方法,并去实际尝试:
解决方法 :只需要在markdown文章开头添加一个
<meta name="referrer" content="no-referrer" />
然后就是
hexo clean && hexo g && hexo d
上传博客了,这一次分别在电脑和手机端打开文章,图片显示正常,问题解决。
原理解析:
为了不做一个只会搬运的码农,这里简单讲解一下原理:
- HTML的 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。这也是为什么加在mardown文章里不会看到这段代码的原因。
- HTML 的 name 属性规定了元数据的名称,这里我们用到的是referer属性,这个属性的作用是让服务器判断来源页面,即用户是从哪来的,很多时候referer被当做防盗链来使用,服务器根据你的访问来源判断是否应该让你下载这个资源,如果你的来源不和规范,比如是个恶意爬虫,那么就会产生403错误。
- 到这里,
content="no-referrer"
的意义就呼之欲出了,既然我们想拿到这个资源但被服务器认出来之后又被拒绝了,那么伪装一下,不告诉服务器不就行了?所以,这里content的no-referer就是表示不发送引用数据,隐藏自己的来源信息。这样,图片就能正常显示了。