在Hexo中使用本地图片是件非常让人痛苦的事情,因为在Markdown里面图片地址永远不能和最后生成的网页保持一致。一开始,我打算Bmob来进行图片管理,但是发现这样是不是太麻烦呢?

搜索了下,发现Hexo使用本地图片有以下几种方法:

  • 放在根目录 这种方法是把图片放在source/img下,然后在Markdown里写![img](/source/img/anything.png)然而这种方法在本地的编辑器里不能正确识别图片的位置。
  • asset-image
    这是一个在Hexo 2.x时出现的插件,后来被纳进Hexo 3 core。但是很尴尬的是,这种方法直接放弃了Markdown原来的语法,使用类似的语法。这让人有点难以接受咯~
  • 解决方法 hexo-asset-image 首先确认_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="图片描述">
    至此,我们就可以很方便地插入本地图片了!!!