前言#

介绍一下 Hexo 中插入图片的两种方法，![]() 和 <img>。

Markdown 语法#

Markdown 中有标准的导入图片的语法：![]()

![图像的替代文本](图像的路径)

如果使用过类似 Typora 的 Markdown 写作工具，应该了解，当导入图片时，可以自动在该 .md 文件的路径下创建一个子文件夹，用来本地保存图片。

hexo 中默认是支持该方法的，但由于 hexo 会将该子文件夹内的图片在渲染完成后和 html 文件放在同一文件夹下，所以按原始路径无法访问，因此需要安装额外的插件。

1
# 原始路径
2
![](/images/avatar.png)
3
# 渲染后
4
<img src="/images/avatar.png" />
5
# 实际路径
6
<img src="/avatar.png" />

为此，需要 hexo-asset-image 这个插件进行中间调度

step1. 修改 hexo 的 _config.yml 文件: 将 post_asset_folder: false 修改为 post_asset_folder: true

step2. 安装 hexo-asset-image 插件: npm install hexo-asset-image

step3. 创建新的文章 hexo n xxx : 在 xxx.md 的同路径下能看到同名文件夹，可以再该文件夹下保存图片

![](images/avatar.png) 👇

Html 标签#

Html 插入的图片方式就是通过 <img> 标签插入图像，这种方法所有的浏览器都支持，格式如下：

1
<!-- 绝对路径 -->
2
<img src="https://zodiaclab.top/images/avatar.png" />
3

4
<!-- 相对路径 -->
5
<img src="/images/avatar.png" />

<img src="https://zodiaclab.top/images/avatar.png" width = 200px /> 👇

HTML <img> 标签

img 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性：src 属性 和 alt 属性。

alt 规定图像的替代文本。

src 规定显示图像的 URL

结论#

个人觉得 Html 标签的方法至少在功能上比较强，像 Markdown 语法就不支持图片尺寸修改，但 Markdown 比 Html 在后期文件整理上更加简洁。