Hexo中插入本地图片

2018-09-02

安装hexo-asset-image插件
配置
插入图片
预览

安装hexo-asset-image插件

使用如下命令安装插件

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

插件安装完以后，实际上是存放在下面的目录文件夹下

1	\node_modules\hexo-asset-image

hexo-asset-image的原理应该是根据Hexo生成html后以时间的为目录的规则，将我们图片的相对地址转换成了生成后与时间对应目录的绝对地址。

配置

图片除了可以放在统一的images文件夹中，还可以放在文章自己的目录中。文章的目录可以通过配置_config.yml来生成。

1	post_asset_folder: true

将_config.yml文件中的配置项post_asset_folder设为true后，执行命令$ hexo new post_name，在source/_posts中会生成文章post_name.md和同名文件夹post_name。将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。

插入图片

使用markdown的语法：

1	![](XXX博客文章名/XXX图片)

eg:
我在_post的博客文件夹下放一个6.png的图片，引入如下：

1	![](Hexo中插入本地图片/6.png)

生成的img中路径【/2018/09/02/Hexo中插入本地图片/6.png】说明该插件生效了。

预览

<!-- 生成静态文件 -->
hexo g 
<!-- 启动hexo服务 -->
hexo s

直接进入 http://localhost:4000/ 即可访看到图片。