在Hexo中使用本地图片是件非常让人痛苦的事情,因为在Markdown里面图片地址永远不能和最后生成的网页保持一致。一开始,我打算Bmob来进行图片管理,但是发现这样是不是太麻烦呢?
搜索了下,发现Hexo使用本地图片有以下几种方法:
放在根目录
这种方法是把图片放在
source/img
下,然后在Markdown里写![img](/source/img/anything.png)
然而这种方法在本地的编辑器里不能正确识别图片的位置。asset-image
这是一个在Hexo 2.x时出现的插件,后来被纳进Hexo 3 core
。但是很尴尬的是,这种方法直接放弃了Markdown原来的语法,使用类似的语法。这让人有点难以接受咯~解决方法
首先确认
_config.yml
中有post_asset_folder:true
在Hexo目录,执行
1
$ npm install https://github.com/CodeFalling/hexo-asset-image --save
比如在
文章名 ├── 图片1.jpg ├── 图片2.jpg └── 图片3.jpg 文章名.md
这样的目录结构,只要使用
![图片描述](文章名/图片名称.jpg)
就可以插入图片了。最终生成的结构
public/2016/07/08/文章名 ├── index.html ├── 图片1.jpg └── 图片2.jpg
同时生成HTML是
1
<img src="/2016/07/08/文章名/图片名称.jpg" alt="图片描述">
而不是愚蠢的
1
<img src="文章名/图片名称.jpg" alt="图片描述">
至此,我们就可以很方便地插入本地图片了!!!