使用Hexo及Hexo的Aurora主题时插入图片不显示

初次编辑

前几天我写了第一篇插入了图片的文章,发现一个很奇异的现象:

在本地使用hexo cl && hexo g && hexo s生成静态网页的时候,图片能够正常显示。但是把同样的文章推送到远程仓库并部署出来的时候,图片无法显示。

我开始使用的是Hexo官方教程提到的图片标签插件,但是尝试无果。后来询问其他使用Aurora主题的用户得知,插入图片可以直接用一般的Markdown语法:

1
![成品](guobaorou/guobaorou.jpg)

注意到我在_config.yml中设置了post_asset_foldertrue

为了解决问题,我首先检查了_config.yml中对于permalink的配置,并设置trailing_htmlfalse,重新尝试生成并部署网页,问题依旧存在。

后来我用F12检查网页元素,发现本地生成静态网页中正常显示的图片元素如下图,可以发现路径是正确的:

远程部署仓库生成的静态网页中无法显示的图片元素是这样的,可以看出来路径十分奇怪,不仅多了一级文件夹还少了几个字符:

然后我为了检查这多出来一级的路径怎么回事,又设置trailing_htmltrue,发现远程部署静态网页的元素变成了这样:

这时我注意到,多出来的一级路径名称多了5个字符,而“.html”正好也是5个字符,而且其他的超链接(外部网站链接等)都没有出错,唯独图片出错。

经过一番思考,我想起来:我用图片标签插件插入图片失败的时候以为是自己的问题,于是去网上找了几篇教程。其中有几篇教程提到了一个叫做hexo-asset-image的插件,我尝试使用这个插件插入图片也失败了。这时,我读到另一篇文章,提示我使用hexo-asset-img插件,并介绍说这个插件是前一个插件的高级版,前一个插件已经停止更新了。于是我把后一个插件也装上了,发现还是不行,然后就换成了一般Markdown语法。但是我在切换到一般Markdown语法的时候没有删除hexo-asset-imagehexo-asset-img,并且hexo-asset-image插件会在生成静态网页的时候修改图片的路径,导致路径出错。

最终,我把hexo-asset-image插件卸载,并重新生成远程部署网页,问题解决。

2026.9.12 更新

因为一些未知原因,不得不从Aurora主题更换成NexT主题,并采用Hexo官方的内联插入图片方式插入图片,更新了所有图片插入方式。