如何在HexoBlog中插入图片

注意学习Markdown基本语法Markdown教程

🧩 Hexo 插入图片方法总览与对比

插入方式	路径示例	优点	缺点	推荐场景
文章资源文件夹	!{% asset_img photo.jpg 描述 %}	自动关联文章、结构清晰、支持主题预览	需启用 post_asset_folder，语法特殊	每篇文章独立资源管理
全局资源文件夹		简单直观、支持 Markdown 语法	所有图片混在一起，难以维护	多篇文章共享图片资源
网络图片链接		快速插入、无需本地存储	图片可能失效、加载慢、依赖外部服务	引用图床或第三方图片
相对路径语法	or	编辑器预览方便	Hexo 不一定能正确解析，首页可能不显示	Typora 本地写作预览
插件方式	 + 插件支持	自动处理路径、兼容 Markdown	需安装插件、可能存在兼容性问题	想用原生 Markdown 又要兼容Hexo

---

绝对路径	/images/photo.jpg	图片放在 source/images/ 中	✅ 推荐（全局资源)
相对路径	./photo.jpg 或 photo.jpg	图片放在文章同名资源文件夹中	✅ 推荐（文章资源)
本地路径	C:\Users\你\Pictures\图.jpg	本地 Markdown 编辑器预览	❌ 不推荐
Hexo标签	{% asset_img photo.jpg %}	启用 post_asset_folder 后使用	✅ 强烈推荐

---

🔧 推荐配置与操作步骤

✅ 启用 post_asset_folder
在 _config.yml 中添加：

post_asset_folder: true
执行：
hexo new "文章标题"

生成结构：
source/_posts/
├── 文章标题.md
└── 文章标题/
└── photo.jpg
在 Markdown 中使用：
![]{% asset_img photo.jpg 描述 %}
📦 插件辅助（可选）
如果你想用原生 Markdown 语法插图但仍希望 Hexo正确解析，可以安装：

npm install hexo-asset-image --save
但需注意兼容性问题。

Thinking

为什么标签能显示，路径却不行

1. Hexo 的构建机制
   • Hexo 并不会直接渲染 Markdown，而是将其转换为 HTML。
   • 在转换过程中，Hexo 会识别 {% asset_img %} 标签，并自动将对应图片复制到 public 目录。
   • 普通 Markdown 图片语法（如 ![图](photo.jpg)）不会触发资源复制逻辑，除非你手动放置图片到 source 下的正确位置

---

![文章资源]

Tips:每次hexo new 的文档模板在scaffolds