关于Hexo博客插入图片

在Hexo博客中插入图片有多种方法，本文介绍常用的几种方式。

一、使用post_asset_folder插件（推荐）

这是最推荐的方法，需要在 _config.yml 中配置：

post_asset_folder: true

1.1 创建文章时自动创建资源文件夹

hexo new "文章标题"

这会自动创建：

• source/_posts/文章标题.md
• source/_posts/文章标题/ （资源文件夹）

1.2 插入图片

将图片文件放入资源文件夹中，然后在文章中使用：

![](图片文件名.png)

注意事项：

• 如果文件名包含空格，需要将空格替换为URL编码 %20
• 例如：Pasted image 20260204090200.png 应写成 Pasted%20image%2020260204090200.png

1.3 实际例子

source/_posts/我的文章/
├── 我的文章.md
├── image1.png
└── Pasted image 20260204090200.png

在 我的文章.md 中：

![](image1.png)
![](Pasted%20image%2020260204090200.png)

二、使用全局images文件夹

2.1 创建images文件夹

在 source 目录下创建 images 文件夹：

source/
├── _posts/
├── images/
│   ├── logo.png
│   └── banner.jpg

2.2 插入图片

![](/images/logo.png)

三、使用外部图片链接

直接使用外部URL：

![图片描述](https://example.com/image.png)

四、使用hexo-asset-image插件

4.1 安装插件

npm install hexo-asset-image --save

4.2 使用方法

创建文章后，将图片放入同名资源文件夹，然后使用：

{% asset_img 图片文件名.png 图片描述 %}

五、常见问题

5.1 图片不显示

可能原因：

1. 文件名包含空格但未进行URL编码
2. 图片文件路径错误
3. 图片文件不存在
4. 资源文件夹名称与文章标题不匹配

解决方法：

• 检查文件名，将空格替换为 %20
• 确认图片文件确实存在于正确的位置
• 检查资源文件夹名称是否与文章标题完全一致

5.2 文件名包含空格的处理

错误写法：

![](Pasted image 20260204090200.png)

正确写法：

![](Pasted%20image%2020260204090200.png)

5.3 中文文件名

虽然Hexo支持中文文件名，但建议使用英文文件名以避免编码问题。

六、最佳实践

1. 使用post_asset_folder：这是最推荐的方式，图片管理清晰
2. 避免文件名包含空格：使用下划线或连字符代替空格
3. 使用有意义的文件名：便于后期维护
4. 压缩图片：优化加载速度
5. 使用相对路径：便于博客迁移

七、示例代码

7.1 正确的图片引用示例

# 我的文章

这是一张示例图片：

![](example.png)

这是一张文件名包含空格的图片：

![](Pasted%20image%2020260204090200.png)

使用全局images文件夹的图片：

![](/images/logo.png)

外部图片链接：

![示例图片](https://example.com/image.png)

八、总结

在Hexo博客中插入图片，推荐使用 post_asset_folder: true 配置，这样可以：

• 图片与文章关联清晰
• 便于管理
• 支持相对路径引用

关键注意事项：

• 文件名包含空格时，使用 %20 替换
• 确保图片文件存在于正确的位置
• 资源文件夹名称必须与文章标题完全匹配