一个方便的在hexo博客中插入图片的方法

发表于 分类于 阅读次数： 本文字数： 1.3k
介绍一个非常简单的解决 hexo 上传图片之后不能显示的问题。

在 hexo 搭建的博客中，一直存在一个问题就是本地在 Typora 能看见的图片，在上传之后不能显示。

在网络上常见的解决方法是打开 _comfig.yml 中的 post_asset_folder: true，但是对于每篇文章都新建一个文件夹还是比较繁琐了，我们更希望的是有一个单独的 /images 文件夹来放置图片，今天介绍一个非常简单的解决方法。

Typora 设置

在设置里找到图像 -> 插入图片时，选择 “复制到指定路径”，然后在下面选择你想放置图片的文件夹（一定要在你 blog）文件夹里面，然后注意，一定要勾选 “优先使用相对路径”，这样设置，我们的本地图片路径就是 “../images/xxx.jpg”，配合之后的操作才能被正确解析图片位置。（我们的文章在 source/_posts，图片放置在 source/images）

image-20250328124001848

Hexo 设置

进行以上设置后，我们仍然不能看到博客上的图片，这是因为我们把博客部署后，文章的图片采用相对路径 ../images/xxx.png，但是生成后，文章的 url 被放置在 http://localhost:4000/2025/03/28/文章标题，此时的路径就有问题了，因为图片文件夹应该在 http://localhost:4000/images。

我们可以新增一个 js 脚本，帮助我们转换路径。

进入博客的路径，编辑 _config.yml，新增以下设置：

1
2
3
4
5
6
7
8
9
10
11
# 确保基础URL正确
url: https://www.incrdiblej.cool  # 或 http://localhost:4000
root: /

# 修正资源路径
marked:
  prependRoot: true  # 自动为相对路径添加根目录
  postAsset: true    # 处理资源文件

# 关闭自动资源文件夹（避免冲突）
post_asset_folder: false

注意以上设置不能重复，如果之前有的话就注释掉/删掉，否则hexo g会报错。

我们打开主题对应的 script 文件里，next 为：hexo-theme-next/scripts/ ，新建一个 fix-image-path.js 文件，内容如下：

1
2
3
4
hexo.extend.filter.register('after_post_render', function(data) {
    data.content = data.content.replace(
        /<img src="..\/images\/(.*?)"/g, '<img src="/images/$1"');
});

它可以帮助我们将相对路径转化为绝对路径。

此时我们尝试新建一个博客并插入图片

1
hexo new "test"

如果看到图片路径如下图所示，证明本地成功了：

image-20250328125559774

然后在本地服务器测试效果：

1
2
3
hexo clean
hexo g
hexo s

进入博客后，如果看到图片，就证明已经成功啦！