Hexo图片引用问题

Posted on Edited on

前言

使用Hexo创建博客很方便，但是图片的管理是一件很头痛的事情。最开始想要使用图床的方式来引用图片，但是止于图床中图片管理不易和难以寻找一个稳定的图床。后来发现了Hexo原生支持的图片引用方式，Github地址

hexo-asset-image的使用

开启post_asset_folder

在博客的_config.yml配置中将post_asset_folder置位true。

1
post_asset_folder:true

打开上述开关后，在使用Hexo创建新文章时会自动创建一个同名的空文件夹，与该文章相关的所有静态资源都可以放到该文件夹中，以方便在文章中直接引用。

安装hexo-asset-image插件

在Hexo目录下执行如下命令：

1
npm install hexo-asset-image --save

在文章中引用图片

这里直接使用相对路径引用图片：

1
![](测试图片.jpeg)

插入图片测试：

可以看到，上面显示的图片生成的html中使用的是图片的绝对路径地址，而不是相对路径。

后记

本文所记述的引用图片的方式旨在解决博客图片的管理问题，和图片的引用在主页或者其他页面展示不正确的问题。

与上文记述的不同的是，Hexo3提供了新的标签插件来解决文章中资源引用的问题：

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

笔者在尝试Hexo3的标签时出现了一些错误还未解决，因此暂不演示该种方式来引用图片。