hexo-asset-image problem

Posted on In Views:
使用hexo搭建博客后，希望在博客内容中能够插入图片。刚好找到一种解决方法：hexo-asset-image，但是实际操作的时候，最终图片还是显示异常。以下记录如何解决这个问题的过程。

缘起

在之前使用hexo搭建博客后，认为在内容中插入图片还是不可缺少了。所以找到了一个博主发布的一遍文章：hexo博客中插入图片失败——解决思路及个人最终解决办法，专门解决我这个需求的。

先介绍一下我的hexo环境：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
cj@52e0bd6293ac:/workspace/blog$ hexo --version
INFO  Validating config
hexo: 7.3.0
hexo-cli: 4.3.2
os: linux 6.8.0-40-generic Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
node: 12.22.9
v8: 7.8.279.23-node.56
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 72
nghttp2: 1.43.0
napi: 8
llhttp: 2.1.6
http_parser: 2.9.4
openssl: 1.1.1m
cldr: 40.0
icu: 70.1
tz: 2021a3
unicode: 14.0

hexo-next-theme：8.20.0

下面就是我按照分享的文章的操作过程：

  • 下载hexo-asset-image插件

    1
    2
    cj@52e0bd6293ac:/workspace/blog$ npm install hexo-asset-image --save

  • 修改hexo的配置文件_config.yml

    1
    2
    # 仅修改一处：将false修改为true
    post_asset_folder: true

  • Typora修改图片偏好设置

    image-20240907142349989

  • 在Typora编译md文件，并复制图片到内容中

  • hexo清理缓存并重新构建：hexo clean && hexo g

以上就是按照分享文章的步骤，但是图片还是无法显示（go die）。

但是我在hexo构建时，发现了一些奇怪的东西：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
cj@52e0bd6293ac:/workspace/blog$ hexo s
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.20.0
Documentation: https://theme-next.js.org
========================================
INFO  Start processing
update link as:-->/.io//Snipaste_esp32c3_2024-09-07_11-47-30.png
update link as:-->/.io//Snipaste_esp32c3_2024-09-07_12-01-02.png
update link as:-->/.io//Snipaste_esp32c3_2024-09-07_11-47-30.png
update link as:-->/.io//Snipaste_esp32c3_2024-09-07_12-01-02.png
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

这里的图片路径很不正常，我猜测这是图片无法正常显示的原因。

解决

通过把文件的异常路径放在浏览器搜索，发现了一个博主发布了解决方法：解决hexo-asset-image图片相对路径替换问题 ，原来是hexo-assert-image插件转换图片路径出问题了。

按照分享的文章修改步骤：

  • 编辑 blog/node_modules/hexo-asset-image/index.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 仅新增 else if 代码

    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    // if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
    if(/.*\/index\.html$/.test(link)) {
      // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
      // image in xxtitle/ will go to xxtitle/index/
      appendLink = 'index/';
      var endPos = link.lastIndexOf('/');
    }
    else if (/.*\/$/.test(link)){
      var endPos = link.lastIndexOf('/');
    }
    else {
      var endPos = link.lastIndexOf('.');
    }

  • hexo清理缓存并重新构建：hexo clean && hexo g

    这里要注意一点：每次插入图片，都要重新构建，否则图片无法正常显示。

最终本地访问图片显示正常，部署到github.io也显示正常。

补充说明：

第一篇分享文章的博主表示：Typora引入图片时，不能加入图片的文件夹前缀，只能直接给出图片的文件名称，否则图片无法正常显示。并且该博主也通过hexo-asset-image插件的README.md说明用来论证。

我也查看了该插件的README.md，确实如同该博主说的。但是我还是使用相对路径（即加上了图片所在的文件夹作为前缀），并没有出现图片无法显示的情况。