hexo 博客插入本地图片时遇到的坑

简介: 在使用Hexo博客时,作者遇到了将本地图片插入文章的问题。安装了`hexo-asset-image`插件(v1.0.0)并启用资源文件夹功能后,图片并未正确显示。问题在于图片路径未被转换。通过卸载`hexo-asset-image`,改用`hexo-asset-img`插件,并调整图片引用格式为`![alt](文章名/图片名.png)`,成功解决了图片显示问题。此问题源于`hexo-asset-image`在Hexo 5及更高版本中已失效。

哈喽大家好,我是咸鱼。

最近一直在折腾博客的事,说是 hexo 极易上手,我觉得只仅限于在安装部署的时候,随着对 hexo 的深入使用,发现遇到的问题还是挺多的。

那今天来讲一下我在把本地图片插入到 hexo 博客文章中遇到的坑。

遇到的问题

这是我的 hexo 环境:

hexo: 7.2.0
node: 18.20.0
npm: 10.5.0

除此之外,我还安装了一个图片路径转换的插件:hexo-asset-image,版本是 1.0.0。

Hexo 配置文件 _config.yml 里有下面这个配置,且将其置为 true

post_asset_folder: true

这个功能实际上是Hexo官方文档中提到的资源文件夹功能:即当你使用 hexo new 新文章 命令生成一篇新文章时,不但会在 \source\_posts 目录下生成一个 新文章.md 文件,还会生成一个同名的文件夹,这个文件夹下面可以存放该文章的所有资源(例如图片、附件等)

实际上你可以不用 hexo new 命令,直接在 \source\_posts 下创建一个 md 文件和同名的文件夹也能达到一样的效果。

有了上面的配置,Hexo 在 public 目录下生成 html 文件时,会把文章对应的目录下的图片等附件复制过去。


原理讲完,现在实际操作一下。

先创建新文章

hexo new Kafka-如何保证消息消费的全局顺序性

然后编写文章,并把文章中的资源放在同名的目录下:

根据插件 hexo-asset-image 的 README 内容,我们需要把文章中的图片路径改成跟图片名一致:

这个时候本地的文章是找不到图片路径的,所以不会显示。

然后执行下面的命令在本地验证一下:

hexo clean

hexo g

hexo s

结果发现图片没有正常显示:

F12 查看一下图片的路径

<img src="/image-20231127105610363.png" alt="image-20231127105610363">

可以看到,图片路径并没有转换成功。

如何解决?

根据网上的教程试了好久,最终在一处不起眼的评论区发现了解决办法。

既然 hexo-asset-image 不管用,那就换一个插件,我们使用 hexo-asset-img

首先卸载掉 hexo-asset-image (直接在 node_modules 目录下把插件的目录删除即可 )

然后安装新插件:

cnpm install hexo-asset-img --save

根据里面的 README 内容,把图片路径改成:

![image-20231127105610363](Kafka-如何保证消息消费的全局顺序性/image-20231127105610363.png)


然后执行下面的命令在本地验证一下:

hexo clean

hexo g

hexo s

发现图片正常显示:

图片路径转换成功:

<img src="/2024/04/29/Kafka 如何保证消息消费的全局顺序性/image-20231127105610363.png" class="" title="image-20231127105610363">

我们从 README 里面还了解到:大概是从 Hexo 5 开始, hexo-asset-image 已经失效, 并且此仓库已 archived

这也就是一开始使用 hexo-asset-image 插件导致图片路径没能转换成功的原因

相关文章
解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题
用Hexo搭了个Gitpage的博客,兴冲冲的发了11篇博文后发现翻页按钮不正常显示,显示为`<i class="fa fa-angle-right"></i>`的HTML编码。本文介绍如何解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题。
65 1
|
编解码
解决Hexo博客导航栏链接URL乱码问题
今年的计划之一是搭建一个博客,开始写博客。于是在网上找了一些博客程序发现用Hexo在gitHub上搭建自己的个人博客是比较简单而且易于维护的做法。 在网上找了一些教程后开始搭建,用自己比较中意的hexo-theme-next模板,发现搭建成功后导航栏链接不对,出现了URL乱码的问题。在网上搜索了一把发现有些网友也碰到了类似的问题不过都还没有解决。
155 0
|
网络安全 Windows
hexo博客2:初始化
hexo博客2:初始化
65 0
【脚本】Typro笔记图片自动上传博客园脚本
【脚本】Typro笔记图片自动上传博客园脚本
195 0
【脚本】Typro笔记图片自动上传博客园脚本
|
Shell 开发工具 git
hexo+NexT博客最新定制记录
最近对hexo和NexT博客又做了一次定制。
1896 0
|
Shell 开发工具 git
hexo 制作我的博客
hexo 制作我的博客
1171 0
|
搜索推荐 JavaScript
hexo博客解决不蒜子统计无法显示问题
如题,刚巧最近在统计自己各个平台博客的总阅读量问题,结果写好的代码,突然运行不出结果。后面发现博客页面底部的访客统计也有问题。于是就来考虑如何解决。
2509 0
hexo 博客添加pdf 插件
我博客原文地址:http://www.hiekay.com/2018/09/06/%E6%8F%92%E4%BB%B6/ 一、安装插件 npm install --save hexo-pdf 二、配置 创建 book 页面 hexo new page...
2609 0
|
前端开发
为hexo博客添加基于gitment评论功能
**关于gitment** gitment其实就是利用你的代码仓库的Issues,来实现评论。每一篇文章对应该代码仓库中的 一个Issues,Issues中的评论对应你的博客每篇文章中的评论。如果你是用github的博客的话 用起来将会十分的方便。
|
数据安全/隐私保护
去掉CSDN使用MarkDown编辑器插入图片自动添加的水印
用了好多天的MarkDown编辑器了,蛮好用的。这个编辑器唯一的缺点就是在插入图片时会自作多情的给添加上CSDN的水印了。
1645 0