Hexo 插入图片

图片资源放在本地 source/ 文件夹后，本地服务器浏览时图片正常显示，但部署到 github 上会找不到图片。

究其原因，是图片路径出现问题。开始时自己在 source/ 文件夹下建了 assets 文件夹，专门用于存放文章相关的图片：

source
    |- _posts
    |- assets
        |- images
            |- image-1.png

使用 markdown 引用图片的方式为

1	![hexo image](../../assets/images/image-1.png)

查看结构，发现部署以后，图片会自动添加日期相关的文件结构目录：

而实际存放的目录是 http://www.sanks-blog.com/assets/images/image-1.png ，导致图片资源访问不到。

为了解决这个问题查了很多资料，才知道原来除了本地存放图片，还可以使用图床。

所谓图床，就是储存图片的服务器，支持创建图片的对外链接地址便于引用。使用时只要引入图片的绝对地址就可以，方便简单。

图床分为免费和收费的。无论是国内还是国外的免费图床都存在隐患，毕竟小本买卖，一旦停止服务，图片自然也就变成了小红叉。收费图床稳定一些，不管从服务还是稳定性上，都更推荐收费图床。

目前大家推荐比较多的国内图床：

七牛云储存
新注册用户可免费使用 10G 存储空间。

极简图床
其实也是依赖七牛云储存账号的。

在本地存放图片的方法经过修改以后也可以完美使用。重点在于 _config.yml 文件中设置 post_asset_folder: true，开启资源文件夹功能，该功能支持用户通过相对路径标签引用资源。

下面我们来看会发生什么。执行 hexo new [layout] [title]创建一篇新的文章，会发现 source/_posts 下自动生成了一个和 md 文件同名的目录（也可以自己手动创建），这就是用于存放与文章有关的图片文件夹。

例如，我们想写一篇名为 hexo.md 的文章，执行 hexo new “hexo”，那么 _post 文件夹下的结构将是：

1
2
3

_posts
    |- hexo.md
    |_ hexo

将相关的图片放入 hexo 文件夹

_posts
    |- hexo.md
    |_ hexo
        |_ image-2.png

需要注意的是，使用该种方式在 markdown 文件中引用图片将不再使用 markdown 语法，而是使用标签插件引用相对路径，否则可能造成图片和其他资源显示不正确。引用语法如下：

1
2
3

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

在上述语法下，插入图片的方法：

1	{% asset_img image-2.png This is an example image %}

查看页面，发现图片已经可以正常显示了，图片的路径和实际存放目录是一致的。

如果想使用 markdown 语法插入相对路径的图片，可以利用插件。设置 post_asset_folder:true 后，在根目录下执行：

1	npm install https://github.com/CodeFalling/hexo-asset-image --save

确保在 source/_posts 下创建和 markdown 文件同名的目录，里面存放需要的图片，然后在 markdown 中插入图片：

1	! [hexo image] (hexo/image-1.png)

生成的页面中图片引用路径

1	<img src="/2019/02/10/hexo/image-1.png" alt="hexo image">

至此，用 markdown 完美实现本地图片插入。

参考文档：
https://hexo.io/zh-cn/docs/asset-folders.html