前言

最近在给博客写文章时，遇到一个非常“迷惑”的问题：hexo s 本地预览时，Markdown 里的图片怎么都不显示。

文章写着写着，图片却“神秘失踪”，感觉整个页面都像失去了灵魂。作为一个经常折腾博客的人，这点小石头自然不是问题，于是动手排查——没想到这一查，还真挖出不少关键细节。

下面就把整个过程整理成一篇“踩坑指南”，或许能帮你少走点弯路。

🐞问题现象：图片路径前自动加上“/”

在文章中我这样写图片路径：

1
![示例图片](4c700da3a5f0889ee4695ac6a0606806.png)

理论上，Hexo 在启用 post_asset_folder: true 后，会把图片拷贝到与文章同一级的目录下，并自动处理路径。

但实际预览时，浏览器里生成的 HTML 却变成：

1
<img src="/4c700da3a5f0889ee4695ac6a0606806.png">

注意：前面多了一个 “/” 根路径！

一旦路径变成 “/xxx.png”，自然就找不到图片了。

🔍进一步排查：public 目录里根本没有图片

用 hexo s 后我查看了 /public，发现：

文章里的图片根本没有被复制进去。

这里通过设置Hexo配置文件中post_asset_folder: true就可以解决

🧩问题核心：你用的是 hexo-renderer-marked（它有坑）

你的 package.json 中写着：

1
"hexo-renderer-marked": "^6.0.0"

而 Hexo 官方早已说明：

hexo-renderer-marked 不支持 post_asset_folder 的自动路径处理。

也就是说：

  • 图片放在 _posts/xxx/ 同名文件夹是对的
  • 但 hexo-renderer-marked 不会帮你处理图片路径
  • 于是 Hexo 最终生成的 HTML 直接变成 “/xxx.png”

导致图片自然找不到。

🎯解决方案：卸载 marked，改用官方推荐的 hexo-renderer-markdown-it

Markdown-It 支持更完善、更灵活的 Markdown 解析，关键是：

它支持 post_asset_folder 中文件自动路径解析

解决方案非常简单，只要：

🔧卸载旧的 marked 渲染器

在博客根目录执行：

1
npm uninstall hexo-renderer-marked

🔧安装 markdown-it 渲染器

1
npm install hexo-renderer-markdown-it --save

✨ 修改后，图片路径自动处理正常！

换渲染器后：

  • 不会再自动加上 “/”
  • Hexo 会把图片正确地放到 /public/post-name/ 下
  • Markdown 写法维持最原始的格式即可：
1
![图示](4f8602473350fd7711f9a8f79cb10b4f.png)

预览与部署都能正常显示。