Hexo插入图片

Hexo插入图片

修改Hexo博客目录中的 _config.yml文件，设置如下：

post_asset_folder: true

该配置在生成文章的时候生成一个同名的资源目录用于存放图片文件。

创建一篇新文章：

hexo new post "filename"

执行完成后在source/_posts目录下生成了一个md文件和一个同名的资源目录（用于存放图片）。

1.官方推荐用法

{% asset_img image.png 图片引用方法一 %}

注意，该方法在本地电脑无法显示，得deploy到GitHub上才能看到效果。但是使用该方法我会失败，生成的路径会变成：

/2024/09/16/GitHub%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/09/16/GitHub%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/my.jpg

正确的路径应该是：

/2024/09/16/GitHub%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/my.jpg

不知道什么原因多生成了一段，暂时还没解决这个问题。待定。

2.markdown语法，图片存放的位置在source/_posts/该文章的同名资源目录

![图片引用方法二](image.png)

一开始使用这个方法也是会出现图像路径错误的情况，生成的路径会变成：/.com//my.jpg，正确能显示图片的路径应该是my.jpg。后来我又重新安装了下面两个插件：

npm install https://github.com/CodeFalling/hexo-asset-image --save
npm install hexo-renderer-marked

之后就莫名其妙的成功了，至于为什么成功我还是有点不理解，以后研究。

3.markdown语法，图片存放的位置在source/images/image.png

这种方法和前两种图片存放位置不一样，是将图片放在/source/images目录下。

![图片引用方法三](/images/image.png)

这个方法一定能成功，没有bug。

参考链接：

1.Hexo生成博文插入图片 | Asroads’Blog

这是要安装hexo-asset-image和改index.js，但是我没有成功。

2.Hexo 中完美插入本地图片 | JK Notes (andavid.github.io)

这个也是修改hexo-asset-image中的index.js，我没试过。

3.HEXO系列教程 | 发布文章 | 解决静态图片路径错误问题 | 小白向教程-腾讯云开发者社区-腾讯云 (tencent.com)

这个也是修改hexo-asset-image中的index.js，我没有成功。

4.使用hexo-asset-image在hexo博客中插入图片-CSDN博客

这个也是修改hexo-asset-image中的index.js，我没试过。

5.【hexo专栏】hexo如何进行文章渲染的 - 金炳的博客 (fedfans.com)

这个是关于hexo渲染文章的，写的很全面。这个人的专栏写了很多hexo，可以多看看。

6.【Hexo博客】Hexo+markdown之引用图片方法汇集_markdown 图片引用-CSDN博客

这个还新增了使用base64来存储图片的方法，可以参考一下。