如何在hexo中插入图片

使用markdown插入图片

在souce目录下，创建一个images的文件夹，然后使用markdown的标准语法![显示名称](/images/图片名称.jpg)进行插入图片

使用这个方法，主要是简单易操作，但是有两个缺点

• 无法设置图片悬浮描述
• 所有文件都在一个大文件夹里，比较混乱。

使用hexo内置标签语法插入图片

需要在_config.yml文件中启用post_asset_folder功能后，在git bash中用命令hexo new post 标题时，会自动生成一个md文件以及同名的文件夹。将图片存放其中，后续使用{% asset_img file.jpg "图片悬浮描述" %}插入图片。如果想要调整图片大小，可以增加参数{% asset_img file.jpg 400 300 "图片悬浮描述" %}（名称 → 宽度 → 高度 → 描述）。

使用这个方法，在我看来有三个优点：

• 可以给图片添加悬浮描述；
• 可以设置图片大小；
• 图片单独存放在各自的文件夹，条理清晰；

但是对于设置图片大小，其实不太好操作，因为一般写博客的时候，都是通过截图，有大有小。而通过这种方式指定图片大小，往往不好把握图片比例，第一次调整会像下图一样比例失衡，往往要多次尝试才行，一般宽度最长在600。

使用html代码插入图片

hexo支持html代码，可以使用纯html代码进行图片插入，可以按比例调整图片大小，如下：

<img   src="/images/html-try.png"  width="80%" alt="备注">

或者混合第二种标签语法的方式，可以调整图片的大小，添加批注，边框等：

<div style="border: 1px solid #eee; padding: 10px; margin: 20px auto; width: 80%">
  {% asset_img html-try.png "悬浮描述" %}
  <div align="center">图注文字</div>
</div>

各方法示例

我个人一般习惯与使用第二种标签语法，因为大部分图片，我都会在截图时控制大小。对某些图片进行大小或者居中方式调整时，会通过html来对标签语法进行调整。以下是对以上各个方法的举例：

markdown

标签语法

纯html

html混合标签语法

图注文字

参考

hexo插入图片及控制大小
在hexo博客中插入图片的方法