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

news/2024/10/4 1:23:58

哈喽大家好,我是咸鱼。

最近一直在折腾博客的事,说是 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 cleanhexo ghexo 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 cleanhexo ghexo s

发现图片正常显示:

图片路径转换成功:

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/29044.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

VectSharp一个C#轻量级矢量图形库

VectSharp 是一个功能强大的 C# 库,专门用于创建矢量图形,包括文本,不依赖任何第三方,支持跨平台运行,包括 Mac、Windows 和 Linux。使得开发者可以更容易地在他们的项目中集成矢量图形的生成和处理。https://github.com/arklumpus/VectSharp 特点:内置字体:包含了 14 种…

Mysql中的双路排序和单路排序

在Mysql中使用orderby进行排序的时候,是可以使用到索引排序的,但是需要添加一些限制条件,例如: select * from t_user where name=张三 order by name;使用这种方式就可以使用到索引,同时使用limit也是可以使用到索引的 select * from t_user order by name;通过这种方式不…

RocketMQ模型和生产实践

RocketMQ的客户端编程模型相对⽐较固定,基本都有⼀个固定的步骤。掌握这个固定步骤,对于学习其他复杂的消息模型也是很有帮助的。 消息⽣产者的固定步骤 1.创建消息⽣产者producer,并指定⽣产者组名 2.指定Nameserver地址,可以在代码中固定写IP,也可以通过配置项来写,最好…

Spring SpringMVC——前端控制器初始化过程

创建完DispatcherServlet对象时,会执行类中的init方法如果不配置 load-on-startup,那么 DispatcherServlet 将在第一次收到请求时才会被实例化和初始化。这意味着 DispatcherServlet 不会在服务器启动时立即执行创建和初始化的操作。当第一个请求到达时,Servlet 容器(如 To…

【VMware vSphere】存储提供程序中I/O 筛选器状态显示为脱机以及证书已到期的解决办法。

存储提供程序是由 VMware 提供或由第三方通过 vSphere APIs for Storage Awareness (VASA) 开发的软件组件。存储提供程序也可以称为 VASA 提供程序。存储提供程序可与包含外部物理存储和存储抽象的各种存储实体(例如 vSAN 和 Virtual Volumes)集成。存储提供程序也可以支持软…

服务器分层拓扑架构图形化显示工具

目录服务器分层拓扑架构图形化显示工具 --- HWLOC下载依赖包安装源码编译安装执行命令示例显示 PCI 层次结构参考文档服务器分层拓扑架构图形化显示工具 --- HWLOC可移植硬件局部 (hwloc) 软件包提供了现代架构分层拓扑的可移植抽象(跨操作系统、版本、体系结构等),包括 N…

流畅的python学习笔记

示例1-1 一摞有序的纸牌知识点:collections.namedtuple 构建了一个简单的类,表示单张纸牌。from collections import namedtuple Card = namedtuple(Card, [rank, suit])class FrenchDeck:ranks = [str(n) for n in range(2,11)] + list(JQKA)suits = spades diamonds clubs …

+63+条消息++狂神+docker+学习笔记_GaleTeng+的博客+-+CSDN+博客

+63+条消息++狂神+docker+学习笔记_GaleTeng+的博客+-+CSDN+博客 文章目录前言Docker 概述1.Docker 为什么会出现?2.Docker 历史3.Docker 能干嘛Docker 安装1. Docker 的基本组成2. 安装 Docker3. 阿里云镜像加速4. 回顾 HelloWorld 流程5. 底层原理Docker 常用命令1. 帮助命令…