hexo 文中图片的插入

直接在 Markdown 编辑器中进行图片的插入会导致发布到博客后图片无法正常显示,本文主要介绍两种图片插入的方法。

方法一:文章资源文件夹

Hexo 目录下的 _config.yml 配置文件中的 “post_asset_folder: false” 改为 “post_asset_folder: true”,再执行文章创建命令 $ hexo new "article title" 时,将会在 _posts 目录下生成一个与所创建的文章标题同名的文件夹。

将要插入的图片放在生成的该文件夹内,引用时,首先将图片拖入文中,然后对 Markdown 中图片的引用格式作如下的修改:

1
![图题](文章标题picturename.png)

其中 “picture name” 为所引用图片的名称。

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确,为了解决这个问题,可以采用如下的方法进行图片的引用:

方法二:相对路径引用的标签插件

标签插件的下载:

1
npm install hexo-asset-image --save

或者通过:

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

插件下载成功后,将要插入的图片放在文章资源文件夹中,文章中图片的引用格式如下:

1
{% asset_img picturename.jpg 图题 %}