图片在Hexo中的添加与调用

Hexo 系列之六：图片的添加与引用

在 Hexo 博客中添加图片，是一项必备技能。无论你是想展示产品图片、插图，还是截图，都能为文章内容增添趣味和吸引力。本文将为你详细讲解 Hexo 中图片的添加与引用方法，包括本地图片和网络图片的引用，以及标签和语法引用图片的技巧。

一、添加本地图片

添加本地图片主要有两种方法：

1. 绝对路径引用

这种引用方法需要你在文章中直接写出图片的绝对路径。以 Hexo 默认主题为例，图片一般保存在 source/images 文件夹中。那么，如果你想引用 source/images/image.jpg 这张图片，则需要在文章中写出以下代码：

![Image of a cat](/source/images/image.jpg)

2. 相对路径引用

这种引用方法使用相对路径来引用图片，相对于文章所在目录。例如，如果你想引用同一目录下的 image.jpg 图片，则需要在文章中写出以下代码：

![Image of a cat](image.jpg)

二、添加网络图片

添加网络图片也主要有两种方法：

1. 标签插件语法引用

这种引用方法使用 Hexo 标签插件来引用网络图片。Hexo 默认支持的标签插件有 figure 和 img，你可以根据自己的需要选择使用。

例如，如果你想引用 https://example.com/image.jpg 这张网络图片，则可以使用 figure 标签插件，代码如下：

{% figure https://example.com/image.jpg %}
Image of a cat
{% endfigure %}

或者使用 img 标签插件，代码如下：

{% img https://example.com/image.jpg %}

2. 语法引用

这种引用方法直接在文章中写出图片的 URL，不需要使用标签插件。例如，如果你想引用 https://example.com/image.jpg 这张网络图片，则只需要在文章中写出以下代码：

![Image of a cat](https://example.com/image.jpg)

三、图片的调用

无论你使用哪种方法添加图片，最终都需要在文章中引用图片。你可以通过以下语法来引用图片：

![Image of a cat](image.jpg)

其中 image.jpg 为图片的文件名，你可以根据实际情况修改。

四、注意事项

• 添加图片时，请确保图片的分辨率和尺寸合适，以免影响文章的加载速度和阅读体验。
• 如果你是使用 Hexo 默认主题，则图片会自动生成缩略图。
• 你可以通过修改 Hexo 配置文件中的 post_asset_folder 选项来更改图片的存储目录。

以上就是在 Hexo 博客中添加和引用图片的方法。希望对你有所帮助。