向Hexo博客中插入图片

发表于 更新于 分类于 ， ，

介绍三种向Hexo中插入图片的方法。

插入本地图片

将Hexo的配置文件 _config.yml 中的 post_asset_folder 属性设置为 true 。这样就开启了资源文件夹功能，该功能支持用户通过相对路径标签引用资源。设置完毕后，使用指令

1
hexo new "新文件"

时，在 _posts 文件夹下会生成一个md文件“新文件.md”和一个名为“新文件”的文件夹。
例如，我执行指令

1
hexo new "hello"

此时_posts文件夹下会新增一个 hello.md 文件和一个名为 hello 的文件夹，结构为：

1
2
3
_posts
  |- hello.md
  |- hello

将之后 hello.md 文件需要用到的图片存入 hello 文件夹中，在 md 文件中通过以下格式引用图片：

1
{% asset_img image.png This is an example image %}

还可以使用html语法(常用此种方法引用本地图片)，下面的语句引用了与md文件同名的文件夹中的图片 image.png，并使其居中显示，显示出来的图片的长宽均为原图长宽的一半：

1
<div align="center"><img src="image.png" width="50%" height="50%"></div>

插入网络图片

(来源：知乎；作者：知乎用户；链接：Markdown中插入图片有什么技巧?)
只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。例如：

1
![avatar](http://baidu.com/pic/doge.png)

缺点是图片存在网络服务器上，非常依赖网络。

常用方法：利用GitHub存储图片，在markdown引用图片链接地址
(来源：知乎；作者：沈绍敏；链接：Markdown中插入图片有什么技巧?)

  1. 将markdown需要用的图片放到git仓库中，发布到GitHub上
  2. 访问GitHub仓库：smshen/MarkdownPhotos · GitHub
  3. 访问图片：MarkdownPhotos/test.jpg at master · smshen/MarkdownPhotos · GitHub
  4. 点 download 按钮，在地址栏可以复制图片地址，或者在Download按钮上直接右键 “复制链接地址”:
    https://raw.githubusercontent.com/smshen/MarkdownPhotos/master/Res/test.jpg
  5. 在Markdown中引用图片：
    1
    ![Aaron Swartz](https://raw.githubusercontent.com/smshen/MarkdownPhotos/master/Res/test.jpg)

插入base64转码结果

(来源：知乎；作者：知乎用户；链接：Markdown中插入图片有什么技巧?)
用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。
基础用法：

1
![avatar](data:image/png;base64,iVBORw0......)

这个时候会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。就像写论文时的文末的注释和参考文档一样。这个想法可以通过markdown的参考式链接语法来实现。
进阶用法如下：

1
![avatar][doge]

文末存储字符串语法：

1
[doge]:data:image/png;base64,iVBORw0......

这个用法不常见，比较野路子。优点是很灵活，不会有链接失效的困扰。缺点是一大团base64的乱码看着不美观。


参考链接

  1. Hexo 图片插入
  2. markdown中插入图片怎么定义图片的大小或比例?
  3. Markdown中插入图片有什么技巧?