hexo 文章内插入附件 插入图片终极解决方案
在用MarkDown进行文章撰写的时候，本地的图片插入相对比较方便，但是类似HEXO这样把MarkDown文件转成静态网页文件再发布，因为牵扯到链接图片文件的路径问题，有点麻烦。如何方便实现在HEXO中插入图片呢？
HEXO官方解决方案
少量图片的简便办法
对于零星少量的图片使用，可以在网站根目录下的source文件夹中建立一个images文件夹，将所需要的图片文件复制到此文件夹，使用MarkDown中的方式访问使用。
大量或者规律性使用图的办法
对于大量或者规律性使用图片的，HEXO提供了另外一种结构化的图片资源管理。就是将_config.yml配置文件中post_asset_folder: false 改为 post_asset_folder: true。这个开关打开后，每次hexo new命令会生成一个同名同位置的文件夹，用以存放图片资源。当然这个文件夹中也可以存放类似图片这样需要位置引用的资源。在HEXO发布的时候，这个文件夹中的内容会随同文章内容一并上传发布。这样也可以使用MarkDown中的方式访问使用。
相对路径访问图片等资源问题和解决办法
通过常规的MarkDown语法和相对路径引用图片或其它资源相对方便，但是这些包含相对位置引用资源的文章在首页，或者存档页面不能正常显示。HEXO 3开始核心代码中加入了相对路径引用的标签插件，用以解决这个问题。（在HEXO 3之前许多开发者开发类似插件，现在被官方更新后核心代码采用了）。
{% asset\_path slug %}
{% asset\_img slug \[title\] %}
{% asset\_link slug \[title\] %}示例
- 网站根目录source文件夹图片MarkDown常规引用。
- 本文同名文件夹图片MarkDown常规引用。
- 使用标签插件的引用。
{ % asset_img img-in-post.jpg Post Image % }
Post Image
hexo默认的资源文件夹 -- source/images/
hexo默认的图片和附件方法很不好用，举例其中稍好的方法如下：
在source/imamges/下放置图片，
文章内引用格式如下：
hexo g或者部署到服务器时，其对应的链接是domain.com/imamges/img1.png
hexo想在source/_post/下放置图片或附件
更改根目录下_config.yml
skip_render:
- "_posts/imamges/**/*"
# 包含资源文件夹 -->public/_posts/i/**
include:
- "_posts/imamges/**/*"文章内引用格式如下：
hexo g或者部署到服务器时，其对应的链接是domain.com/_posts/imamges/img1.png
hexo资源文件夹功能post_asset_folder -- 图片的相对引用
图片的相对引用Hexo 搭建个人博客（五）Hexo 资源文件夹_15wylu的博客-CSDN博客_hexo source文件夹
hexo 文章资源文件夹功能post_asset_folder非常的不好用
开启方法是，更改根目录下_config.yml
post_asset_folder: true开启 post_asset_folder 后，假如如创建一篇名为 “hello_post” 的文章并引用一张图片，它的文件目录结构如下：
$ tree source/_posts
source/_posts
├── hello_post
│ └── example.png
└── hello_post.md即使用hexo的new post功能，会自动生成一个和文章同名的资源文件夹（如上的hello_post/）
三种相对引用的写法及其效果：
Hexo 官方文档关于 markdown 的示例写法，图片不能在主页正常显示，但在文章中能正常显示。此外，这种相对引用写法在绝大数 markdown 编辑器的预览视图中都无法正常显示图片（Typora 通过设置
Use Image Root Path可以解决，它会在文件头添加typora-root-url: xxxx）。{% asset_img example.png example %}Hexo 官方推荐使用标签的写法，图片能在主页和文章中正常显示，但是不能在 markdown 编辑器的预览视图中预览图片。
几乎所有的 markdown 编辑器都支持的相对引用的写法，在markdown 编辑器的预览视图中都能正常显示图片，但在主页和文章中无法正常显示。
综上所述，post_asset_folder非常的不好用，推荐使用插件来解决图片问题
hexo-relative-link去除文章链接(站内链接)的.md后缀，例如：
安装 hexo-relative-link插件
npm install hexo-relative-link假设文章内链接如下：
[hello](hello.md)则渲染为domain.com/hello/index.html,而不是domain.com/hello.md
hexo-relative-link解决插入图片和附件的问题：
安装 hexo-relative-link插件
npm install hexo-relative-link更改根目录下_config.yml
# hexo-relative-link 见 https://www.npmjs.com/package/hexo-relative-link
# ../images/img1.png <--> arc:"/hello_my_post/../../images/img1.png" <--> source/images/images/img1.png <--> localhost:5000/images/img1.png
post_asset_folder: true设置内部链接类型为插入基于当前笔记的相对链接，简称相对链接
(typora或者obsidian都有这项设置)
假设一种情况是，在hello_my_post.md内插入一张图片名为img1.png，插入附件名为pdf1.pdf，具体如下：
在
source/_posts/内放置文章,source/_posts/hello_my_post.md在
source/imamges/目录下放置图片，source/imamges/img1.png在
source/pdf/目录下放置图片，source/pdf/pdf1.pdf
图片在hello_my_post文章内引用格式动如下：
(hello_my_post.md内)
[pdf alt](https://webdav-1309345210.file.myqcloud.com/assert/pdf1.pdf)链接会被渲染为
<img data-src="/hello_my_post/../../images/Pasted%20image%2020220409114954.png" alt="">
src="/hello_my_post/../../pdf/pdf1.pdf"其中/hello_my_post/../是插件自动添加的前缀，
../images/img1.png是原本的链接，../pdf/pdf1.pdf是原本的链接
这样，在网站就能正常显示图片和附件了，它们对应的url是
`../images/img1.png` <--> `domain.com/imamges/img1.png`
`../pdf/pdf1.pdf` <--> `domain.com/pdf/pdf1.pdf`这样的好处是，typora或者obsidian 配置附件优先使用相对路径，拖动文件、图片到 typora或者obsidian 就可以自动生成链接，这个链接不用修改就可以直接发布到 hexo 博客了 _
hexo-relative-link想要引用在source/_post/下放置的图片或附件
上面所述的图片和附件都放置在source/的子目录中，如果想在source/_post/下放置图片或附件，还需要更改根目录下_config.yml，具体如下：
假设source/_post/images下放置了你想引用的图片，
更改根目录下_config.yml
skip_render:
- "_posts/imamges/**/*"
# 包含资源文件夹 -->public/_posts/i/**
include:
- "_posts/imamges/**/*"其他设置同上
参考、引用、致谢
本文链接： http://iworld2u.com/2020/03/02/How-to-insert-images-in-hexo/