📣 处理hexo博客中图片不显示问题

Last updated on 2023-09-16 10:13

在解决这个问题的过程中，我经历了三个阶段，很磨人最终还是回到了起点，发现最初的方法最好，如果赶时间，可以直接看第三个阶段。

🌸第一阶段：将图片保存在本地

搭建好个人博客网站之后，写了两篇markdown文章（这时候我图片用的是网络地址），然后按照hexo三连上传了文章，最后在浏览器打开发现图像不显示：

一般图片显示不出来很大的原因是路径不对。于是我去查看了图片路径，确实找不到相应的图片。然后我参考相关资料了解到hexo g指令是将md文件生成html页面，然后每篇博文生成的html页面最后都是放在用年月日做文件夹的下面，例如：E:\myblog\public\2023\08\31\test。

下面是我参考养恐龙、ETRD、金牛大王三位的回答，最终解决了我的问题。

第一步：确保你的Hexo的配置文件_config.yml里面有这个选项配置，并将其置为true

post_asset_folder: true

这个功能实际上是Hexo官方文档中提到的资源文件夹功能，它的作用在于当你使用hexo n "文章名"生成一篇新文章时，会在\source\_posts目录下生成一个文章名.md 文件外，附带生成一个与文章名同名的文件夹，可以用它来存放这篇文章的所有资源，比如图片，附件等。

【注】你也可以自己在 _posts 文件夹下自动生成md文件和相同名字的文件夹（用于存放图片）

第二步：typora中的图像保存位置设置

点开文件——>偏好设置，设置如下：

修改好后，图片引用路径就在和博文同名的文件夹（新建博文名为test）的图片，如图所示：

第三步：安装插件

在根目录下打开git bash，然后运行以下命令，如果有安装淘宝镜像，第一个改为cnpm即可。

npm install https://github.com/xcodebuild/hexo-asset-image.git

运行结果如下图所示，图为安装成功：

该插件的作用：将图片等静态资源的引用路径转化为绝对路径。

【注】我最开始不是用的上面命令安装的，用的是npm install hexo-asset-image -- save，该命令安装的是插件 hexo-asset-image 1.0 ，这个版本有点问题，安装后图片不能正常显示，查看图片路径被渲染成了 /.xx/abc.png 的格式（xx 是域名后缀）。最后采用上面的命令才成功。

如何卸载该插件？路径：\blog\node_modules\hexo-asset-image，直接删除文件夹，我试过没问题。