Hexo - 图片无法加载

概述

图片无法加载这个问题我找过大量的文档做参考，最终还是解决了，但是我不确定是否对所有人都有效，或许只能当做参考。

原因

大概其实就是使用的hexo-asset-image这个插件导致出现的一些奇奇怪怪的问题。

问题1

为什么 hexo-asset-image 会出问题？

• 这个插件的行为其实非常粗暴且不够智能，主要有以下几个问题：
• 它默认会把你写的所有图片路径 ![](xxx.png) 当成 同名资源文件夹下的文件
• 不论你路径写得对不对，它都会硬替换路径。

问题2

它不支持多级目录结构

• 比如你文章在 source/_posts/git/2025-02-23.md，对应资源目录是 2025-02-23/001.png
• 插件可能会把它错误解析为 /2025/02/23/2025-02-23/001.png，完全错了。

尝试解决

你的图片资源如果是希望一个文章对应一个单独的资源目录，那么你就这样:

执行hexo new <文章名>去创建一个新的文章，他会为你生成一个markdown文件和相同名字的目录。

接着你的图片资源全部存放到这个目录里面。

在markdown中使用![](./001.png)来引入图片资源（当然，这里是假设你的图片名字叫001.png，通过相对路径的方式去引入）

hexo clean # 清理本地缓存
hexo g # 重新设定资源路径
npm uninstall hexo-asset-image # 卸载这个插件
npm install hexo-asset-img --save # 安装这个新的插件

一套执行完成后再尝试运行，然后打开浏览器无痕模式去访问你的文档，看看图片出来没。

hexo server # 运行