解决hexo博客不能显示图床图片问题

刚搭建好了hexo博客,写了一篇带图的文章,结果发现图挂了…之前看博客扫到hexo博客显示本地图片可能会有问题,于是选了图床图片的方式插图,结果还是没能幸免,好在搜索了半天,解决了这个问题,这里做个记录,帮助后面遇到问题的同学。

解决方案:

问题情境:

在自己电脑的Chrome浏览器查看博客,正常显示图片,切换到Safari、火狐浏览器图片挂了。 手机端各浏览器均显示不了图片。

解决步骤:

  • 分析
  1. 检查图床图片的链接:

    点进去发现图片正常显示,排除图床服务器问题。

  2. 用Chrome打开博文,右键检查或者查看网页源码:

    找到图床图片链接,点击发生403(Forbidden)错误,找到问题根源。

  • 解决

    403 forbidden,说明了这个网络资源这样获取是被拒绝的,那么通过简单的谷歌,找到了相关的解决方法,并去实际尝试:

    解决方法 :只需要在markdown文章开头添加一个<meta name="referrer" content="no-referrer" />

    然后就是hexo clean && hexo g && hexo d上传博客了,这一次分别在电脑和手机端打开文章,图片显示正常,问题解决。

原理解析:

为了不做一个只会搬运的码农,这里简单讲解一下原理:

  1. HTML的 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。这也是为什么加在mardown文章里不会看到这段代码的原因。
  2. HTML 的 name 属性规定了元数据的名称,这里我们用到的是referer属性,这个属性的作用是让服务器判断来源页面,即用户是从哪来的,很多时候referer被当做防盗链来使用,服务器根据你的访问来源判断是否应该让你下载这个资源,如果你的来源不和规范,比如是个恶意爬虫,那么就会产生403错误。
  3. 到这里,content="no-referrer"的意义就呼之欲出了,既然我们想拿到这个资源但被服务器认出来之后又被拒绝了,那么伪装一下,不告诉服务器不就行了?所以,这里content的no-referer就是表示不发送引用数据,隐藏自己的来源信息。这样,图片就能正常显示了。

参考

posted @ 2022-09-13 11:51  yangstar  阅读(1115)  评论(0编辑  收藏  举报