hexo文章插入本地图片方法+理解

问题原因

最近尝试着学习hexo插入图片的方法，发现了以下几个问题：

我平时写md文档时用的都是相对路径，插入图片一般会用一个文件夹在源文件相同目录中以免图片过多导致观感不好，使用的图片路径一般为pic/picture.jpg。但是在hexo里则无法做到对应的相对路径转换。

我们可以了解到，通过将_config.yml里的post_asset_folder的值从false改为true即可在hexo new titlename的时候同时创建一个对应的文件夹用于存储需要导入的图片，使得在编写文档的时候导入图片的路径变为foldername/picture.jpg。这在编写时是可以看到图片的，但当通过hexo g转变为html时会出问题。

第一次测试

在这里我们用一个测试文档上传hexo进行对比，测试文档为test.md图片名为test.png，测试图片的路径代码分别为

![test](test/test.png)

和

![test](test.png)

图片的内容为：

进行本地的hexo g && hexo s之后查看网页：

会发现两个都没有显示出来

通过网页f12可以发现

<a href="http://localhost:4000/test/test.png" data-fancybox="gallery" data-caption="test" data-thumb="http://localhost:4000/test/test.png"><img src="/test/test.png" alt="test">
</a>

和

<a href="http://localhost:4000/test.png" data-fancybox="gallery" data-caption="test" data-thumb="http://localhost:4000/test.png"><img src="/test.png" alt="test">
</a>

不难看出，<img src>在转换过程中只是进行了对md文档转换方式的复述。编写文档时放在test文件夹里的图片放在了:year/:month/:day/:title目录下，而public文件夹生成的文件路径则变为:year/:month/:day/:title/index.html，该文档转换目录如下：

该文档目录转换目录内容如下：

也就是说，在这种情况下，md文档在转换html的时候相对路径没有转换成功。

第二次尝试

在前面_config.yml不变的情况下，可以了解到还有一种插入图片的方法。

{% asset_img test.png test %}

将这种方法添加入文档，会得到以下结果：

通过这种方法可以得到

<a href="http://localhost:4000/2023/02/09/test/test.png" data-fancybox="gallery" data-caption="test" data-thumb="http://localhost:4000/2023/02/09/test/test.png"><img src="/2023/02/09/test/test.png" class="" title="test"></a>

即成功转换，但是这种通过{%%}方式无法第一时间查看文档内容图片是否正确，比较繁琐。

第三次尝试

通过安装hexo-renderer-marked插件来进行插入：

npm install hexo hexo-renderer-marked

同时将_config.yml更改配置如下：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

进行hexo clean后，进行本地的hexo g && hexo s之后查看网页：

进行hexo clean的原因也很简单，没有hexo clean之前没变动的文档不会重新生成html，就会导致更改参数没有达到预想的效果

本地hexo s之后的效果：

再看F12：

可以发现，第二张图变为了：

<a href="http://localhost:4000/2023/02/09/test/test.png" data-fancybox="gallery" data-caption="test" data-thumb="http://localhost:4000/2023/02/09/test/test.png"><img src="/2023/02/09/test/test.png" alt="test"></a>

说明转换成功。但是第一张图的相对路径还是照旧。这方面的问题到现在没法解决，也暂时找不出解决方案。

而且重要的是，编写的时候一般用第一种写法才能看到图片，但是导入的时候需要第二种写法，所以在编写文档的时候需要注意。

解决方法小结

第一种：将_config.yml里的post_asset_folder的值从false改为true,在hexo new titlename所创建的对应文件夹存放图片，即可用以下语句插入：

{% asset_img test.png test %}

第二种：将_config.yml关于post_asset_folder配置更改如下：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

进行hexo clean后，进行本地的hexo g && hexo s之后查看网页，即可插入图片显示成功。

第三种(未尝试，不一定可行)：hexo g后，手动将index.html关于图片路径的部分进行改动。

同时提醒，这篇文章所采用的hexo环境下使用hexo-asset-image等插件会有一堆问题，插件不支持啊等等等等，那些插件很多已经有好几年没有维护过了，实用性位置，这是我这几天以来发现的比较实用的解决方法。

我的npm list目录：

├── hexo-deployer-git@3.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-tag@2.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.0.0
├── hexo-renderer-pug@3.0.0
├── hexo-renderer-stylus@2.1.0
├── hexo-server@3.0.0
├── hexo-theme-landscape@0.0.3
└── hexo@6.3.0

最后

以上就是受伤鲜花为你收集整理的hexo文章插入图片方法小结hexo文章插入本地图片方法+理解的全部内容，希望文章能够帮你解决hexo文章插入图片方法小结hexo文章插入本地图片方法+理解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。