网上找了很多方案，但是很多都随着版本更新不能用了，因此自己写了一个方案

先看结果：

本地文件是这样的

image-20251225215230213

博客是这样的

image-20251225215312477

首先搞明白原理：直接在Markdown中使用标签 ![]{% asset_img photo.jpg 描述 %}是可以让图片正常在博客显示的，但是这样在写的时候很不方便，因此需要额外配置让我们在Markdown中写的![](1.png)转化为Hexo可以识别的标签格式。

这是我的Hexo版本

image-20251225220508891

将_config.yml文件作如下修改：

1
2
3
4
post_asset_folder: true #将flase改为ture
marked:  #这三行是hexo-renderer-marked工具要求的，现在直接一起修改
  prependRoot: true
  postAsset: true

这样修改以后在创建新的Markdown文件时会在source/_post文件夹下生成同名文件夹，该文件夹用来储存图片

接下来修改Typora的设置

在左上角文件->偏好设置->图像，进行如下设置

image-20251225221201816

这会让我们在复制图片到typora时把图片自动复制到上面生成的文件夹中

接下来执行

1
2
npm install hexo-asset-img --save
npm install hexo-renderer-marked --save

这样，我们插入的图片将会被自动解析为其对应文章的路径。

在路径Blog\node_modules\hexo-asset-img中可以找到README.md,阅读可知，Markdown里引用的图片必须要是下面的格式

1
`hexo-typora.md`: Just use `![logo](hexo-typora/logo.png)` to insert `logo.png`.

而我们的设置完美的满足了这一点，复制的图片自动就是这个格式。

接下来测试

image-20251225222009033

我复制了一张图片，路径自动变为test/1.png,方括号[]里的名称可以随意填。

执行hexo s,得到

image-20251225222151385

到这里就OK啦！

欢迎大家来我的博客玩：huzany’s blog