​ 经常我们在写文章的时候会插入一些图片，比如我的博客类型偏向技术的比较多一些，由于需要步骤引导，所以基本上都是多图杀猫的状态。

​ 同时，由于图片数量的增多，我习惯在本地离线写博客，渲染之后发布到线上，所以这就需要解决一个非常关键的问题：我想很方便的在我的本地写文章，然后上传到服务器的时候图片也能够正确的显示出来。

实现思路

​ 使用 Hexo 渲染 HTML 的时候，你需要对齐本地图片路径和上传之后的路径。

​ 所以，自然而然的我们就想到了相对路径。只要路径是对齐的，剩下的就都好说了。

Typora上的设置

​ 我写文章习惯用 Typora —— 不得不多，写作的感觉是真好。

​ 所以，在 Typora 上你可以如下所示设置

之后，我们找到图像选项卡，这里面需要设置几个地方

  • 在插入图片时选择复制到指定路径。
  • 勾选对本地位置的图片应用上述规则
  • 勾选对网络位置的图片应用上述规则
  • 勾选优先使用相对路径

其余的选项都不勾选，如下图

此时，针对 Typora 端的内容就设置完成了。

后面你也会看到，每次你在 md 文件粘贴图片的时候，都会在文件夹下创建一个以你的 md 文件名称命名的文件夹，这里面就是你这个文章的图片存放地址。

Hexo端设置

​ 下面我们就可以设置 Hexo 端了，这里我们分为两部分，第一部分是安装插件，目的是能够正确解析我们的图片地址；第二部分是需要修改一下配置文件。

安装插件

​ 到你的 Hexo 目录下，安装hexo-image-link插件

​ npm install hexo-image-link --save

当你看到类似下图的反馈时，说明安装成功

修改配置文件

​ 下面我们就可以修改配置文件了。

​ 在你的 Hexo 目录下会有一个_config.yml文件，使用编辑器打开（首选 VScode 一类）

​ 使用搜索，查找post_asset_folder，把后面改为true

​ 同时在下面添加下列代码：

1
2
3
marked:
  prependRoot: true
  postAsset: true

保存配置文件。

生效

要想生效还有最后一步，那就在你的 Hexo 目录下使用hexo clean && hexo g重新生成文件即可，如下：

以后我们就可以实现在本地愉快的写文章，粘贴图片，上传到服务器打开也可以正确显示了。

Enjoy And Peace！