Hexo踩坑:本地图片加载

操作环境

  1. Windows10
  2. Hexo
  3. Github

问题

  为了实现上传图片的功能,将Hexo主页的配置文件(_config.yml)中的post_asset_folder值修改为true后,在Hexo目录下执行

1
npm install hexo-asset-image --save

安装了一个上传本地图片的插件,该插件会在创建新的文章时同时创建一个同名的文件夹用来存放图片

  文档中采取的加载图片的代码为

1
![](文章名/图片名.png)

  我是用上述方法向文章中添加图片时出现本地无法加载的情况,在localhost:4000或是我部署到Github上的博客中都只能显示出一个小方框,无法读取图片。

分析问题

  因为在网页上还能显示一个小方框,只是不能加载图片,所以可以得出大致的问题出在路径上。
  通过观察GitBash在生成静态文件时返回的信息可得知图片路径的解析情况如图

其中 zhuomian.png 为目标图片,Hexo博客搭建为存放文件夹,其余部分为解析后加上去的,这个路径理所当然是加载不出图片的。

解决方案

  考虑到路径的解析可能会受配置文件控制,于是在配置文件中找到了相关的信息

以上为错误配置路径,于是我尝试把url修改成我自己的网址

之后再次生成静态文件后更新的链接看上去就正常了

再次部署之后,博客文章图片就加载正常了。

总结

  这个问题的解决方案并不完美,因为如果在部署之前先启动本地服务在localhost:4000上预览文章仍然无法加载图片,原因应该是部署过程中图片被上传到了github,新的图片路径指向的是github中图片的路径,但是经过测试发现在断网的情况下也能加载已经部署过的图片,所以这个解决方案暂时没有明显问题。