如何在Hexo中无痛地使用本地图片

在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="图片描述">

至此,我们就可以很方便地插入本地图片了!!!