解决Hexo博客插入图片问题

起因

Hexo的优势在于在本地以markdown格式撰写文本,同时可以发布到网络中。而写笔记免不了要保存图片等文件,以往都是保存到第三方图床而导致文本与图片分离,特撰写此改进记录。

方案

pxxyyz学长找到了一个方法,添加插件即可:

1
2
3
npm install https://github.com/CodeFalling/hexo-asset-image --save
或者 我用的这个:
npm install https://github.com/7ym0n/hexo-asset-image.git --save

2.1_config.yml配置文件中添加支持

网上有许多有关Hexo博客插入图片教程,其中官方教程是:资源文件夹 | Hexo ,教程中介绍了在_config.yml中插入下面代码,以支持在本目录下存放图片。

1
2
3
4
5
# 大约在43行位置
post_asset_folder: true
# marked:
# prependRoot: true
# postAsset: true

2.2 Hexo命令生成MD文本文件

在bash中输入hexo new 70-insert-pictures-into-Hexo-blog,稍候片刻目录中将生成对应名称的文本文件和目录。

2.3 Typora编辑器支持图片存放路径

Typora编辑器设置 顺序

以上操作等价于在文档头部增加图片指定路径:

1
typora-root-url: 70-insert-pictures-into-Hexo-blog

等价操作

2.4 配置Typora编辑器

在 “文件 - 偏好设置 - 图像” 中添加./${filename}以支持粘贴图片时自动保存到同名目录中。

文件 - 偏好设置 - 图像

通过以上操作,在本地编辑器Typora中可以正常显示图片,在Hexo博客中图片也将正常显示。

最终,在http://localhost:4000/的测试结果表明,该方法解决了问题:

Fluid主题博客 测试结果

备注1:据官方文档中描述,该方法是使用了hexo-renderer-marked插件,请注意是否安装了该插件。

备注2:本文图片插入格式均为:(70-insert-pictures-into-Hexo-blog/image-20210507224130616.png),Hexo根据配置文件中目录要求重定向资源链接,例如本文变为/70/


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!