hexo & Typora 实现图片插入

一、问题引出

使用hexo框架结合github搭建Blog网站，在本地使用Typora写md文档，在hexo s本地部署和hexo d上传到Github使图片无法正常显示。

原因：

1. 将图片复制到Typora编辑器的md文档中时，图片保存在一个绝对路径的文件夹下，如图所示：

   

2. 展现在网络上的Blog（无论是本地还是Github）不是md文件而是html文件，图片引用需要从md语言转换到html语言，在运行hexo g时hexo框架将图片引用转化为html语言时无法识别md图片引用语言，而是hexo专属的引用方式：（需要通过插件实现图片应用格式的自动转换）

   {% asset_img example.jpg This is an example image %}

二、实现效果

实现图片在Typora、本地和Github都可以正常显示

1. Typora编辑器预览

2. 本地图片显示

   

3. github图片显示

   

三、实现方式

1. 配置hexo

   1. 将Blog根目录下的_config.yml文件中的 post_asset_folder选项改为true（注意冒号后面的空格）

      post_asset_folder: true

   2. 创建一个新的文章，在blog根目录下启动命令行运行以下代码

      hexo new xxx

      此时，在./source/_posts路径下，会新建一个xxx的md文件和一个xxx的文件夹，xxx文件夹用来储存图片。

   3. 使用Typora打开md文件开始写作。

2. 配置Typora：设置Typora图片引用格式

(1) 设置指定路径./${filename}$

(2) 勾选优先使用相对路径

此时，将图片复制到Typora，在源代码下图片引用格式应为

！[图片名](新建博文名称/图片名称.图片格式)
例如：
{% asset_img image-20250125225041063.png image-20250125225041063 %}

3. 安装hexo插件

需要从md图片应用方式转换到hexo图片应用方式，即：

{% asset_img image-20250125225041063.png image-20250125225041063 %} -> {% image-20250125225041063.png image-20250125225041063 %}

在博客文件夹下启动命令行，下载插件hexo-asset-img

npm install hexo-asset-img --save

！！！注意不是hexo-asset-image，如果下载插件错误，使用npm uninstall hexo-asset-image卸载插件！！！

检查是否下载成功，在博客根目录启动命令行输入以下命令，查看是否有hexo-asset-img

npm list

四、正确操作

在完成上述设置后，写博文的正确操作：

1. hexo new xxx 新建一个新的博文，此时hexo会在./source/_posts路径下创建同名的文件夹和md文件，使用Typora打开md文件

2. 将图片粘贴在md文件中时，Typora会在同名文件夹中储存该图片，而且在Typora中的图片引用语法应该为以下格式

   {% asset_img image-20250125225041063.png image-20250125225041063 %}

3. 写完文章运行hexo g，hexo-assit-img插件会自动将md图片引用语言转化为hexo识别的语言，并转化为html语言，在根目录./public/index.html文件中可以看到图片对应的引用语言：

   <img src="/2025/01/25/Image-Test/image-20250125225041063.png" class="" title="image-20250125225041063">

4. 运行hexo s本地调试，图片可以正常显示

5. 运行hexo d上传到github，图片可以正常显示