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

哈喽大家好,我是咸鱼。

最近一直在折腾博客的事,说是 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.mzph.cn/bicheng/8424.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派4b红外检测

1.红外检测连接图 2.红外检测工作原理 红外传感器的工作原理类似于物体检测传感器。该传感器包括一个红外LED和一个红外光电二极管&#xff0c;因此通过将这两者结合起来&#xff0c;可以形成一个光耦合器。 红外LED是一种发射红外辐射的发射器。该LED看起来与标准LED相似&a…

Games101-动画与模拟(求解常微分方程,刚体与流体)

Single Particle Simulation 规定了任何一个物体任何时刻的速度&#xff0c;知道它的初始位置&#xff0c;求它某个时间后的位置&#xff1f; 如果一个物体是匀速直线运动&#xff0c;用初始位置加上速度和时间的乘积即可 如上图&#xff0c;如果想描述一个粒子在一个速度场&am…

【平台开发】MTK6833——cache操作记录

CPU Cache 用的是一种叫 SRAM&#xff08;Static Random-Access Memory&#xff0c;静态随机存储器&#xff09; 的芯片。 通常分为L1&#xff0c;L2&#xff0c;L3三层缓存。 CPU 并不会直接和每一种存储器设备直接打交道&#xff0c;而是每一种存储器设备只和它相邻的存储器…

Linux---HTTP协议

HTTP HTTP协议&#xff08;Hypertext Transfer Protocol&#xff0c;超文本传输协议&#xff09;是一种应用层协议&#xff0c;主要用于在Web浏览器和Web服务器之间传输数据。 一、认识URL 平时我们俗称的 " 网址 " 其实就是说的 URL http请求样例 看起来是一行一…

ubuntu20文件安装和卸载cuda11.6

搜索cuda 11.6 nvidia&#xff0c;进入官网https://developer.nvidia.com/cuda-11-6-0-download-archive 选择linux --> runfile 用安装包安装 wget https://developer.download.nvidia.com/compute/cuda/11.6.0/local_installers/cuda_11.6.0_510.39.01_linux.run sudo s…

uniapp 小程序图片懒加载组件 ImageLazyLoad

预览图 组件【ImageLazyLoad】代码 <template><viewclass"image-lazy-load":style"{opacity: opacity,borderRadius: borderRadius rpx,background: background,transition: opacity ${time / 1000}s ease-in-out,}":class"image-lazy-loa…

第二代增强-采购订单抬头子屏幕增强

文章目录 第二代增强-采购订单抬头子屏幕增强需求查找增强点创建项目增强子屏幕定义全局变量编写出口函数代码激活增强运行结果查看创建的采购订单底表数据 第二代增强-采购订单抬头子屏幕增强 需求 查找增强点 创建项目 增强子屏幕 定义全局变量 *&---------------------…

读书笔记——《高质量C++/C编程指南》(2)

目录 前言 命名规则 共性规则 简单的Windows应用程序命名规则 表达式和基本语句 运算符优先级 复合表达式 if语句 布尔变量与零值比较 整型变量与零值比较 浮点变量与零值比较 指针变量与零值比较 对if 语句的补充说明 循环语句的效率 for 语句的循环控制变量 s…

自动驾驶中常见坐标系极其转换

各个传感器坐标系 相机坐标系统 摄像头的作用是把三维世界中的形状、颜色信息,压缩到一张二维图像上。基于摄像头的感知算法则是从二维图像中提取并还原三维世界中的元素和信息,如车道线,车辆、行人等,并计算他们与自己的相对位置。 感知算法和相机相关的坐标系有图像坐…

Pandas进阶

文章目录 第1关&#xff1a;Pandas 分组聚合第2关&#xff1a;Pandas 创建透视表和交叉表 第1关&#xff1a;Pandas 分组聚合 编程要求 使用 Pandas 中的 read_csv() 函数读取 step1/drinks.csv 中的数据&#xff0c;数据的列名如下表所示&#xff0c;请根据 continent 分组并…

MySQL-ELK基础

1&#xff1a;什么是 ELK ELK是由一家elastic公司开发的三个开源项目的首字母缩写&#xff0c;这三个项目分别是&#xff1a;Elasticsearch、Logstash 和 Kibana。三个项目各有不同的功能&#xff0c;之后又增加了许多新项目, 于是 从5.X版本后改名为Elastic Stack Elastic S…

【JavaScript】内置对象 - Date 日期对象 ④ ( 制作倒计时页面 )

文章目录 一、倒计时页面实现1、需求分析2、计算秒数3、计算倒计时时间的 天 / 时 / 分 / 秒4、页面中显示倒计时时间 二、完整代码示例1、完整代码2、执行结果 Date 日期对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Da…

速卖通商品评论API(aliexpress.item_review)返回值全解析

在电商领域&#xff0c;用户评论对于产品的推广和销售具有极其重要的影响。速卖通&#xff08;AliExpress&#xff09;作为全球知名的跨境电商平台&#xff0c;提供了丰富的API接口供开发者使用&#xff0c;其中aliexpress.item_review API允许开发者获取商品的评论信息。本文将…

品质为王:高效溶解性鱼油胶囊的软胶囊弹性硬度测试解析

品质为王&#xff1a;高效溶解性鱼油胶囊的软胶囊弹性硬度测试解析 在当今的健康产品市场中&#xff0c;高效溶解性鱼油胶囊以其独特的营养价值和吸收效率赢得了众多消费者的青睐。然而&#xff0c;要想在激烈的市场竞争中脱颖而出&#xff0c;产品的品质保证至关重要。其中&a…

深入理解WPF的ResourceDictionary

深入理解WPF的ResourceDictionary 介绍 在WPF中&#xff0c;ResourceDictionary用于集中管理和共享资源&#xff08;如样式、模板、颜色等&#xff09;&#xff0c;从而实现资源的重用和统一管理。本文详细介绍了ResourceDictionary的定义、使用和合并方法。 定义和用法 Res…

鸿蒙内核源码分析(信号消费篇) | 谁让CPU连续四次换栈运行

本篇有相当的难度&#xff0c;涉及用户栈和内核栈的两轮切换&#xff0c;CPU四次换栈&#xff0c;寄存器改值&#xff0c;将围绕下图来说明. 解读 为本篇理解方便&#xff0c;把图做简化标签说明: user:用户空间kernel:内核空间source(…):源函数sighandle(…):信号处理函数&a…

【操作系统】进程与线程概念基础知识

进程与线程概念基础知识 进程进程的概念进程控制块进程状态进程三状态模型挂起进程模模型进程的上下文切换进程控制 线程为什么引入线程线程的概念线程与进程的比较线程的上下文切换线程的实现 进程 进程的概念 1. 进程的定义&#xff1a; 进程是指一个具有一定独立功能的程序…

【面试干货】http请求报文的组成与作用?

【面试干货】http请求报文的组成与作用&#xff1f; 一、http 的请求报文组成二、请求行&#xff08;Request Line&#xff09;三、请求头部&#xff08;Request Headers&#xff09;四、请求体&#xff08;Request Body&#xff09;五、响应头部 &#xff08;Response Headers…

iframe的基本用法

一、背景 在web页面开发中,有时会遇到在一个应用A的页面中引用应用B的页面,此时就需要在应用A中使用iframe嵌入引用B的页面了,比如多租户的web应用,或者门户系统的智能客服助手弹框应用,博主也是在做通用智能客服应用的过程中用到了iframe。网络上有关iframe的信息虽然很…

银河麒麟桌面版开机后网络无法自动链接 麒麟系统开机没有连接ens33

1.每次虚拟机开机启动麒麟操作系统&#xff0c;都要输入账号&#xff0c;密码。 进入点击这个ens33 内网才连接 2. 如何开机就脸上呢&#xff1f; 2.1. 进入 cd /etc/sysconfig/network-scripts 2.2 修改参数 onbootyes 改为yes 2.3 重启即可 a. 直接重启机器查看是否正常&…