1、前言
在撰写 Hexo 博客文档时，发现图片的默认存放方式不太合理。为了在部署后的线上环境中正常显示，图片通常需要放在 source/images 目录下，并通过  的方式引用。
这种方式的问题在于：Markdown 文件与图片分离，若后续移动文章文件，图片路径就会失效，维护成本很高。同时，不便于插图操作，极大影响写作体验。Hexo 官方曾提供的 hexo-asset-image 插件目前已停止维护，无法使用。
好在在 GitHub 上发现了社区提供的解决方案，可实现：
在
source/_posts下新建xxx.md后，当你在 Typora 中粘贴图片时，图片资源会自动保存到与该文章同名的子文件夹中，无需手动干预，专注写作即可。
2、如何引入并配置
2.1 安装hexo-asset-img插件
根据 Hexo 的版本选择对应版本的插件：
- Hexo < 7：
npm install hexo-asset-img@1.1.0 --save
- Hexo ≥ 7：
npm install hexo-asset-img@1.2.0 --save
2.2 配置 Typora 的图片保存路径
示例设置如下图所示：
- 图片保存路径填写为：
${filename}，表示图片将保存到与当前编辑的 Markdown 文件同级的文件夹中。 - 务必关闭“相对路径前添加 ./”的选项，否则图片路径会识别失败，Hexo 无法正确引用。
2.3 启用 Hexo 的文章资源文件夹功能
打开 Hexo 根目录下的 _config.yml 配置文件
搜索 post_asset_folder，false 改为 true
配置完成后，使用 hexo new "文章标题" 创建文章时，Hexo 会自动在 source/_posts 下为文章生成同名的资源文件夹。你可以将对应的图片资源放入该文件夹，保持文档结构清晰整洁。
2.4 Hexo ≥ 7 的额外配置说明
对于 Hexo 7 及以上版本，需要在 _config.yml 中添加以下配置，以支持资源引用路径的自动处理：
post_asset_folder: true
marked:
prependRoot: true
postAsset: true
relative_link: false
这样设置后，Hexo 会在生成页面时自动解析资源路径，无需手动调整，极大提升写作与维护效率。
番外：使用图床
如果使用图床的话，这样post_asset_folder就可以不用启用了也不用安装图片转换插件了。
我使用的图床工具是PicX，感觉挺好用的不用安装直接在线就可上传图片。网上也有很多别的图床工具例如PicGo等等，配置教程就不一一赘述了，大家可自行百度。
PicX配置教程如下：
2.3.1 GitHub OAuth 授权登录
现在github强制使用了，也可以使用这种方式
2.3.2 填写GitHub Token登录
- 创建一个带有
repo权限的 GitHub Token点击 https://github.com/settings/tokens/new 快速新建 GitHub Token
- 点击
Generate token按钮，生成 GitHub Token并保存。 - 图床配置
- 填写 GitHub Token 之后，点击
一键配置PicX 会自动创建 GitHub 仓库，完成仓库、分支和目录之间的配置，并跳转到图片上传页面。
- 进入页面后可以选择图床配置新建目录来设置新的图片保存路径，也可以直接上传图片。
- 图床设置中除了图片压缩选择图中的选项外，其余保持默认。
欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1701220998@qq.com
