Hexo在博客中上传本地图片

正确使用相对路径引用的标签插件

第一种方法


资源文件夹

资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。
比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于

1
$ ![](/images/image.jpg)

的方法访问它们。

文章资源文件夹

1.对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。
这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1
2
$ vi _config.yml
$ post_asset_folder: true

2.当资源文件管理功能打开后,Hexo将会在你每一次通过

1
$ hexo new [layout] <title>

命令创建新文章时自动创建一个文件夹。
这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,
这样你就得到了一个更简单而且方便得多的工作流。

相对路径引用的标签插件

编辑_config.yml post_asset_folder: true

3.通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。
在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

1
2
3
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

错误的引用图片方式

比如说:当你打开文章资源文件夹功能后,你把一个 example.jpg 图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法

1
$ ![](/example.jpg)

它将 不会 出现在首页上。(但是它会在文章中按你期待的方式工作)

正确的引用图片方式

是使用下列的标签插件而不是 markdown :

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

通过这种方式,图片将会同时出现在文章和主页以及归档页中。
参考 https://hexo.io/zh-cn/docs/asset-folders

第二种方法


1.配置主页配置文件_config.yml里的post_asset_folder:这个选项设置为ture

2.在source下创建/images文件夹,把你需要上传的图片xxxx.jpg/png复制到这个文件夹

3.然后只需要在xxxx.md中按照markdown的格式引入图片:

1
$ ![你想输入的替代文字](/images(调用这个路径)/图片名.jpg)

下面是test

测试图片