Hexo博客解决插入图片的路径问题

本文主要解决了因为Hexo的语法和路径要求导致的，在本地和Hexo博客上不能同时加载出图片的问题。

问题描述

在本地使用Typora写Markdown文档时，设置了Typora会自动在文档的根目录下新建./${filename}文件夹，从而可以方便地使用相对路径在文档中插入图片。例如：

# 文件路径
hexo-typora
├── apppicker.jpg
├── logo.png
└── rules.jpg
hexo-typora.md

（这里图1举例的引用格式为什么使用了图片，而没有直接打出，后面进行说明）

这种将Markdown文档和资源（图片）文件夹放在同一目录下的做法可以方便管理和打包。

在使用Hexo写博客时，虽然可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 打开来实现通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们。但是，依旧在Markdown文档使用图1所示的Markdown插入图片的语法却不能在博客中正确的加载出图片（本地加载是没有问题的）。

同样的，如果直接在本地使用HTML语法来插入图片，本地可以加载，博客不能加载出来。

<img src="./hexo-typora/logo.png" alt="logo" />

经测试，可以使用标签插件来使博客中加载出图片。

{% asset_img logo.png logo %}

但是，这样的话，本地就加载不出图片了。两者不可兼得。如果在一篇Markdown文档同时使用图1所示的Markdown插入图片的语法和{% asset_img logo.png logo %}来引用同一张图片，那么在本地和博客上都会多出一条无效（占空）的语句，影响观感，不喜欢。

我使用的是Hexo Fluid主题，究其原因，在配置指南|Hexo Fluid 用户手册中提到，图片需要存放在.\Blog\node_modules\hexo-theme-fluid\source\目录及其子目录下才能正确引用。那这样的就不能使用相对路径了，不方便管理，麻烦，需要寻找更好的解决办法。

解决方法

在网上找到了一篇博主的博客Hexo + Typora + 开发Hexo插件 解决图片路径不一致 | yiyun's Blog，前期准备和实现原理部分这里就不再赘述，可以阅读一下，加深对实现方法的理解，方便后面对相似的问题举一反三。

根据博主GitHub仓库yiyungent/hexo-asset-img的说明，通过在.\Blog\根目录鼠标右键打开Git Bash，输入以下命令可以安装hexo-asset-img插件。

npm install hexo-asset-img --save
# or, Latest Dev
npm install git://github.com/yiyungent/hexo-asset-img.git#main

再次测试，发现博客还是加载不出图片。究其原因，是博主的hexo-asset-img插件能够将下图（图2）所示的Markdown插入图片的语法在文章编译为html之前，

在编译过程中转换为标签：

{% asset_img logo.png logo %}

来实现在本地和Hexo博客上同时加载出图片（这里也说明了图1和图2的举例的引用格式我为什么使用了图片，因为直接打出代码的话本地显示没有问题，但是博客上显示出的是被替换为asset_img标签的代码）。

对比图1和图2可以发现，在引用图片的路径上，图1比图2在路径前面都了一个相对路径的符号./，所以如果你习惯于在路径前不加./，那么，这个插件现在就可以满足在本地和博客上同时加载图片的需求了。但是，如果你像我一样，习惯于在路径前加./，那么，你还需要进行一步操作：

打开插件所在的文件夹，即.\Blog\node_modules\hexo-asset-img\。打开index.js文件，在函数action中加一行代码：

function action(data) {
    var reverseSource = data.source.split("").reverse().join("");
    var fileName = reverseSource.substring(3, reverseSource.indexOf("/")).split("").reverse().join("");
    // 下面的替换操作通过查找所有的(并将其替换为(，从而去除相对路径符号。
    data.content = data.content.replace(/\(\.\//g, '(');  // 添加的一行代码
    // 其余函数部分保持原样，它将接着匹配更新后的内容并进行替换。

现在，通过改进后的hexo-asset-img插件，你引用加或不加相对路径的符号./的图片都不会出现问题了，实现了在本地和Hexo博客上同时加载出图片。

后话

当你发现hexo-asset-img插件在特殊情况下还存在Bug时：

1. 可以像上文那样直接修改index.js文件里的源代码来自行处理Bug。

2. 根据博主在GitHub Issues里的建议，你也可以Fork仓库yiyungent/hexo-asset-img到自己的仓库，完善代码后，再通过

   # 注意网址中间替换为你自己的用户名
   npm install git://github.com/yourname/hexo-asset-img.git#main

   在本地安装完善好的hexo-asset-img插件。

3. 你也可以像博客Hexo + Typora + 开发Hexo插件 解决图片路径不一致 | yiyun's Blog中那样，在本地手动引入插件。

   1. 在.\Blog\node_modules\目录下创建文件夹hexo-asset-img，初始化npm包。

      cd .\Blog\node_modules\
      mkdir hexo-asset-img
      cd hexo-asset-img
      npm init

   2. 编写插件的index.js文件。

   3. 在.\Blog\目录下的package.json文件的dependencies中添加一行"hexo-asset-img": "^1.0.0",（package-lock.json和.\Blog\node_modules\目录下的.package-lock.json需要添加吗？没测试，不知道）。