hexo 图片配置及图片被插入 io

hexo 图片配置及图片链接被插入 /.io//

现象

按照文档打开 hexo 的资源文件夹，来让每次新建的博客都有一个对应的存放图片的文件夹：

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。 这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

post_asset_folder: true

新建文章，然后在对应的资源文件夹内放一个图片 t.jpg，然后在 markdown 内插入图片

![](./t.jpg)

发现前端被转换成了：

<img src="/.io//t.jpg">

解决

hexo图片路径问题 给出了答案：

卸载 hexo-asset-image 插件即可。

npm uninstall hexo-asset-image --save

现在可以正常使用图片了。
上面 HTML 的截图就是按照如下文件夹结构插入的。
本文章的 md 与下图中 md 文件处于同一级目录下，使用 ![](./io-insert.png) 即可正确插入图片。

灵活方案

使用上述post_asset_folder 选项设为 true后，也可以同时兼顾不使用资源文件夹，来展示图片。

在 source 目录下新建 images 文件夹，无需任何其他配置，在 images 下的文件会被静态托管到 /images/xxx 路径下。但注意此时在 markdown 内插入图片时，路径必须以 /images/ 开头，这样引用的是images 下的文件。以 images 开头的话，会被 hexo 理解为，去与当前 md 文件同级的资源文件夹内查找图片，就会 404。

举例：

sources
├── _posts
│   ├── post1.md
│   └── post1
│       └── test.jpg  // A
└── images
    └── test.jpg      // B

在 post1.md 中插入图片：

![test.jpg](/images/test.jpg)

这样展示的是 images/ 文件夹下的 test.jpg 图片（B）。

而不使用开头斜杠

![test.jpg](test.jpg)

这样展示的是 source/_posts/post1/ 文件夹下的 test.jpg` 图片（A）。

注：source/images 内也可以继续嵌套文件夹，引用方式同理，必须以 /images/ 开头即可。