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 插件导致图片路径没能转换成功的原因

相关文章
|
2月前
|
人工智能 运维 安全
玩转OpenClaw 13000+Skill!OpenClaw阿里云/本地部署+ClawHub Skill库选择使用指南
ClawHub作为OpenClaw(原Clawdbot)的官方Skill注册中心,已汇聚超过13000个社区贡献的技能插件,覆盖代码开发、自动化运维、内容创作、知识管理等全场景需求。这些Skill如同乐高积木,能让OpenClaw从基础AI助手,快速升级为适配特定场景的专业工具——对开发者而言,它是代码协作与部署的得力帮手;对内容创作者来说,它是多媒体生成与编辑的创意伙伴;对研究者而言,它是信息检索与知识沉淀的高效工具。
3152 3
|
10天前
|
人工智能 JavaScript 调度
一文看懂:Hermes Agent与OpenClaw区别对比,AI Agent双雄对决,谁才是2026最佳选择
Hermes Agent是轻量Python智能体,主打“自进化+持久记忆”,越用越懂你;OpenClaw是TypeScript控制中枢,强在多通道、多智能体编排与成熟插件生态。免费领阿里云Tokens:https://t.aliyun.com/U/fPVHqY 选Hermes重深度成长,选OpenClaw重广度调度。
611 1
|
5月前
|
人工智能 安全 Serverless
AgentRun Sandbox SDK 正式开源!集成 LangChain 等主流框架,一键开启智能体沙箱新体验
AgentRun Sandbox SDK 开源发布,基于Serverless架构提供安全、弹性的智能体运行环境。支持LangChain、AgentScope等主流框架,内置代码解释、浏览器操作等多模态沙箱能力,助力Agentic AI快速落地,让开发更轻盈,云端更安全。
|
6月前
|
人工智能 边缘计算 安全
阿里云 ESA「函数和Pages」云栖发布:代码即部署,边缘原生落地
阿里云边缘安全加速(ESA)发布全新“函数和Pages”平台,国内首个实现站点托管与边缘函数原生打通,支持全球3200+节点极速部署、企业级安全防护及自动化发布流程。通过GitHub一键集成,结合AI编程助手,实现从代码到全球上线的分钟级交付,定义边缘原生与AI原生的下一代开发体验。
537 0
阿里云 ESA「函数和Pages」云栖发布:代码即部署,边缘原生落地
|
JSON 前端开发 Shell
前端项目添加代码规范(eslint prettier stylelint husky lint-staged commitlint)
前端项目添加代码规范(eslint prettier stylelint husky lint-staged commitlint)
682 0
|
弹性计算 缓存 应用服务中间件
阿里云服务器2核2G99元和2核4G199元实例规格性能及适用场景解析
2024年阿里云推出了两款云服务器,2核2G3M带宽40G ESSD Entry盘价格只要99元1年,2核4G5M带宽80G ESSD Entry盘价格只要199元1年,这两款云服务器的活动截止日期为2026年3月31日,活动期间新购、续费同价。那么这两款云服务器怎么样呢?可以用来做什么?本文将对这两款云服务器进行深度解析,包括配置介绍、实例规格、使用场景以及购买建议,以供选择参考。
阿里云服务器2核2G99元和2核4G199元实例规格性能及适用场景解析
|
5月前
|
人工智能 编解码 运维
阿里云函数计算FC免费试用:每月免费15万CU,试用额度可抵扣函数调用次数、活跃vCPU等费用
阿里云函数计算FC提供每月15万CU免费额度,有效期3个月,支持事件驱动、免运维的Serverless服务,适用于AI、Web、视频转码等场景,新用户可申请,涵盖vCPU、内存、GPU、磁盘及公网流量,按需计费。
585 0
|
Go 开发工具 git
CF+hugo部署要点随记
本文介绍了使用Hugo搭建静态博客的方法,Hugo是一款用Go语言编写的静态站点生成器。文中详细描述了在Windows环境下安装Go、Git和Hugo的步骤,并提供了快速启动指南。此外,还介绍了如何通过Git子模块引入主题,以及如何在本地创建和编辑文章。最后,给出了常用Markdown语法示例,帮助用户轻松撰写博客内容。
803 5
|
搜索推荐 数据库 UED
CRM系统源码|客户管理系统源码开发
CRM系统通过提供个性化的用户体验、提高生产力、改善客户体验和增加销售额来助力企业成长。集成CRM能自动化数据输入,减少管理时间,提高销售代表的效率。此外,CRM还能增强客户互动,降低跳出率,增加透明度,确保整个公司的协调合作。
382 5
|
存储 算法 网络安全
Intel QAT 加速的数据压缩和 TLS 加解密技术 | 龙蜥大讲堂 102 期
Intel QAT(QuickAssist Technology)加速的数据压缩和TLS加解密技术,由Intel网络与边缘事业部唐志军分享。课程涵盖QAT简介、数据压缩、安全应用及价值主张,重点介绍QAT在CPU密集型任务中的加速作用,如对称/非对称加密、数据压缩等。通过QAT,可大幅提升性能,节省CPU资源,优化存储和网络传输效率,适用于网络安全、虚拟机迁移、大数据处理等场景。
1098 0

热门文章

最新文章