1. 问题描述

众所周知，在 md 文件中插入图片的语法为 ![]()。

其中方括号是图片描述，圆括号是图片路径。

一般来说有三种图片路径，分别是相对路径，绝对路径和网络路径。

1.1 网络路径（图床）

所谓的网络路径就是直接引用网上的图片，直接复制图片的网络地址，放在圆括号中就完事了。

这种方式十分的方便，但是也存在一定的问题：

图片失效导致无法加载；
打开网页后要再请求加载图片；
原网站限制，如微信公众号的图片会变得不可见等。

1.2 绝对路径

绝对路径是图片在计算机中的绝对位置。

1.3 相对路径

相对路径是相对于当前文件的路径。

当采用相对路径时，如果你的 Hexo 项目中只有少量图片，那最简单的方法就是将它们放在 /source/images 文件夹中。然后通过类似于 ![图片描述](/images/image.jpg) 的方法访问它们。

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo 也提供了更组织化的方式来管理资源。你需要将 _config.yml 文件中的 post_asset_folder 选项设为 true 来打开文章资源文件夹。

1 2	plaintext post_asset_folder: true

当资源文件管理功能打开后，Hexo 将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹在 /source/_posts 文件夹中。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

例如新建一个博客名为 1.md，相应的会生成一个 1 文件夹，在该文件夹中存放图片 image.jpg。
在 Typora 编辑器中打开 1.md，使用 ![](1/image.jpg) 能在编辑器中正常引用该图片。
在 hexo 网页中，却无法使用 ![]() 的相对路径的方法进行引用，本人尝试了很多种相对路径的写法都无法实现。
原因可能是 _posts 文件夹中的文件在构建 html 时，其中的图片地址会发生改变，如果图片放在 /source/其他文件夹中，图片正常显示。

2. 解决方法

我使用的是相对路径本地上传的方法

2.1 修改_config.yaml文件

修改post_asset_folder属性为true，该属性为true时，使用hexo new命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。

1	post_asset_folder: true # 原本yml文件中内容为false，修改为true

由于项目会生成新的文件目录，同时会解析Markdown中的图片路径，会导致一个问题。
如在一个文件目录下，博客名为1.md，相应的存在一个1文件夹存放图片image.jpg。
在Typora编辑器中，普通的md文件使用![](1/image.jpg)能在编辑器中正常显示图片。
在hexo中，按理说应该是使用![](image.jpg)，但网页中却无法正常显示。
此时应该使用这样的方式来引入图片：

2.2 安装图片插件 hexo-render-marked

npm install hexo-renderer-marked命令直接安装，之后在config.yaml中更改配置如下：

post_asset_folder: true # 原本yml文件中内容为false，修改为true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了。

但是这样还是不太方便和typora的结合

2.3 修改typora并安装hexo-asset-img插件

2.3.1 修改Typora相关设置

文章资源文件夹中引用图片，前提是先将图片放入到文章资源文件夹，如果图片数量众多的话，一张一张的放很影响效率。
使用 Typora 可以在复制图片到文章中时，自动将图片复制到指定文件夹，并修改成对应的路径。

Typora中选择文件-> 偏好设置->复制到指定路径

修改完该配置后，使用typora编辑md文件，插入图片时，会自动在md文件的目录下创建一个和该md文件同名的文件夹。

此时该设置与 hexo 的文章资源文件夹设置相对应，至此写博客时插入图片只需将图片复制（拖动）到文章中即可。

2.3.2 安装hexo-asset-img插件

输入以下命令安装插件

1	npm install hexo-asset-img --save

2.3.3 修改md文件内容

此时假如直接将typora复制过来，图片的路径会为![image名](./md文件名/image名.png),但是这样仍然无法识别。

可以在vscode中按ctrl+h，替换所有的./md文件名为md文件名

举例，新建了一个test.md文件后

2.3.4 编译并上传文章

命令行中输入以下命令，之后打开本地服务器localhost:4000，看到图片已经能够上传成功

1	hexo clean && hexo g && hexo s

3.实际工作流

Typora编辑内容。使用typora编辑相关内容。
打开hexo工程。输入hexo new "文章名"命令，新建文章名.md文件以及文章名/的文件夹
将步骤1typora编写的md文件内容复制到source/_post/文章名.md下，该md文件的相关图片也复制到hexo工程下md文件的同名目录下，即复制到source/_post/文章名/
最后再在Vscode中按ctrl+h，替换所有的./md文件名为md文件名