Hexo 文章中插入图片

根据 hexo 文档中描述,文档中插入图片有两种方式:

  • 统一存放
  • 每篇文章单独的 images 文件夹

统一存放

  • _config.yml 中设置 post_asset_folder: false
  • 建立 source/images 目录,用于统一存放文章中图片
  • *.md 文章中通过 /images/example.jpg 引用图片

hexo s 本地预览站点,发现图片可以正常加载,不过这种方式引用的图片,在 MWebTypora等编辑器中,因路径错误加载图片失败。
解析生成的静态页面可以发现,html 会在引用图片的地址前面添加 / 根目录,所以可以将引用方式改成 ../images/example.jpg,这样在本地编辑器和网站中都可以正常加载图片。

每篇文章单独的 images 文件夹

为了便于后期图片的维护和无用图片清理,准备给每篇文章单独一个资源目录,参考官方文档操作:

  • _config.yml 中设置 post_asset_folder: true
  • 通过 hexo init 创建文章,此时 Hexo 会自动创建一个同名文件夹
  • 将图片存放在文件夹中,文章中通过 hello-hexo/example.jpg 引用图片

hexo s 进行预览,图片无法显示,调试原因发现:

  • hexo g 会将图片放置在文章 html 的同级目录(没有二级文件夹)
  • html 在引用地址前拼接 / 来加载图片
    比如图片真实地址为 http://localhost/2022/06/23/hello-hexo/example.jpg
    网站中加载图片的地址为 http://localhost/hello-hexo/example.jpg

既然是路径中含有子目录导致的,是不是把子目录去掉就可以解决问题?
permalink 改成不带 / 的形式,如 permalink: :title-:hash.html
此时 html 和图片都是直接引用自根路径,hexo s 后发现图片正常加载。

含有子路径的解决办法

写博客的时候,有时候在 _posts 中新建了文件夹,比如 _posts/2022 用于存放当年的博客内容。由于引入了子路径,图片地址又错误了。最后百度了一圈,通过 hexo-asset-image 插件解决了问题。

方案总结

图片统一管理

  1. post_asset_folder: false
  2. 编辑器中 ../images/example.jpg 方式引用

图片分散管理

  1. npm install hexo-asset-image --save 安装插件
  2. post_asset_folder: true
  3. 编辑器中 hello-hexo/example.jpg 引用图片

补充

使用 MWeb 编写文章

MWeb 是一个非常不错的 MarkDown 编辑预览软件,用 MWeb 编写博客时,可以使用外部文档模式(CMD + E),然后引入 source/_posts 目录。
post_asset_folder: true 情况下,在MWeb 中将图片文件夹设置为 {filename},插入图片时,会自动保存到 Hexo 生成的图片目录

Author: HenryMe
Link: https://henryme.com/2022/06/save-images-in-hexo-2fed9ad64909.html
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.