hexo 博客使用之插入图片

在写文章时，常常需要图片来说明需求或表明释义。而对于图片的存放，本文将介绍两种方式：

1. 放入本地目录，缺点是随着时间推移图片文件会越来越多、维护成本越大。
2. 上传到CDN后再使用图片路径，优点是解决了方式一中的不足，缺点是对于选择存放图片的CDN存储变成了重中之重，选择标准是稳定、免费最好。

本地引用

绝对路径

当博客中只使用到少量图片时，可以将图片统一存放在 source/images 文件夹中，然后通过以下方式来访问。

![图一](/images/avatar.jpg)

这种方式既可以在首页展示也可以在文章详情页展示。

相对路径

除了将图片统一存放在 source/images 文件夹之外，还可以将其放在文章自己的目录中。文章目录可以通过配置 站点配置文件：_config.yml 在执行 hexo new <title> 命令时自动生成。

post_asset_folder: true

示例：hexo new hello-world ，目录结构如下：

$ tree ./source/_posts
├── hello-world.md
└── hello-world

将图片资源放在 hello-world 目录中，文章就可以利用相对路径来引用图片资源了。

![图二](avatar.jpg)

这种方式只能在文章中展示无法在首页中正常展示。

注意：这种方式使用时有个前提，默认 站点配置文件：_config.yml 中文章链接格式 permalink: :year/:month/:day/:title/ ，必须以 / 结尾，若是 permalink: :year/:month/:day/:title.html 则图片也无法正常展示，因为它会在站点相对路径下查找图片：http://localhost:4000/:year/:month/:day/:title.html/avatar.jpg。

如果希望图片在文章和首页中同时展示，可以使用标签插件语法。

{% asset_img avatar.jpg 图三 %}

注意：若文章是以 _draft 草稿方式存放，并使用 hexo server --draft 本地服务预览时无法正常展示图片，文章发布后即可正常预览。

CDN引用

除了将图片存放在本地，还可以将图片上传到 CDN 服务中，比如 七牛云，在图片上传CDN后可以获取其对应URL地址，直接将其放到文稿中引用即可。

![图四](http://p1.qn.codezm.com/avatar.jpg_a)