跳至主要內容

Hexo开启post_asset_folder后, 安装hexo-asset-image,不起作用的问题

Tom Tan大约 3 分钟前端Hexo

使用 Hexo 和 github 搭建博客,真是挺有趣的事情,因为对于我们来说,随便敲几行代码,就可以拥有一个非常漂亮的博客。 但在写作的过程中,使用 Typora(一个 markdown 编辑器)插入图片的时候,非常不顺手。后来了解到用 hexo-asset-image 可以提升我的写作效率,,所以开始吧。


安装插件

在 nodejs 里边安装

npm install hexo-asset-image --save
安装hexo-asset-image
安装hexo-asset-image

把在 hexo 根目下的_config.yml 设置

post_asset_folder: true

新建文章

安装完了之后,新建一篇名为 test-img 的文章

hexo new [layout] test-img

现在可以看到 source/_posts 里边,除了有 test-img.mdopen in new window,还多一个文件夹 test-img


在里边我放一张名为 me.jpg 的图片, 插入图片的时候,输入

![](test-img/me.jpg)

如图所示:


发现问题

当我回到 nodejs 的时候,发现不对劲~


然后,我去页面看,图片不显示, chrome-devtools 显示,找不到图片。


当我用 hexo g 生成文件的时候,发现报错, 如下:

FATAL something's wrong. May be you can find the solution here.....

Error: ENOENT: no such file or directory, open 'D:\nodejs6.5\hexo_blog\public\20
17-09-29-test-img.html\me.jpg'

仔细一看路径是

\public\2017-09-29-test-img.html\me.jpg

在 public 文件夹里边也找不到 2017-09-29-test-img.html 文件夹。


百思不得期解,我了解别人的博客都是的链接都是 域名/年份/月份/文件名 的路径, 比如:http://www.54tianzhisheng.cn/2017/09/23/Guava-limit/open in new window


而且我的路径是 /posts/how-to-use-wechat-debug.html, 所有的 html 都是放到


找到原因

为了满意的我好奇心~~,最终我找到了原因。原来,之前我把 hexo 根目下的_config.yml, 把 permalink 设置为 year-:month-:day-:title.html,hexo 就会在根目下生成 html, 而导致 生成 相关的文件夹失效。

是 permalink 和 post_asset_folder 这两个参数是相互影响的。


解决方案

把 hexo 根目下的_config.yml, 把 permalink 设置为 :year/:month/:day/:title/

permalink: :year/:month/:day/:title/

好,重新 hexo clean && hexo g , 得到的就是我们要的那种方路径,而且图片显示正常了。


温馨提示一下:

用 Typora 插入图片时 输入

![](文件名.png)

的时候,虽然在图片网页上能够正常显示,但是在 Typora 编辑时无法显示,那如何才能让 Typora 正常显示呢? 这里分享一个小技巧:

在 Typora 中, 选择 Edit > Image Tools > Use Image Root Path, 然后选择你要的相关文件夹,选择之后,在 md 文件头上 会多一个 typora-root-url: xxxx, 好了,现在可以正常显示了。具体操作看下图。




最后,分享一下源代码:

上次编辑于:
贡献者: Tom Tan