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

news2024/10/6 6:03:24

哈喽大家好,我是咸鱼。

最近一直在折腾博客的事,说是 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 插件导致图片路径没能转换成功的原因

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

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

相关文章

网络安全之二层局域网封装及广域网封装详解

局域网封装&#xff1a;Ethernet2&#xff08;TCP/IP&#xff09;&#xff0c;IEEE802.3&#xff08;OSI&#xff09;&#xff08;前面文章中讲解了TCP、IP和OSI本文就不继续讲解&#xff1a;可以查看&#xff1a;网络安全之OSI七层模型详解-CSDN博客&#xff09; 广域网封装&…

SD-WAN大型企业异地组网与海外访问案例解析

随着大型企业不断扩张&#xff0c;其分公司遍布各地&#xff0c;但异地网络访问的瓶颈日益凸显。若企业还需依赖外网进行业务交流&#xff0c;那么合规、高效的SD-WAN组网方案便显得尤为重要。 客户概述&#xff1a; 该客户专注于无线通讯技术的研发与推广&#xff0c;拥有位于…

TL062CDR 贴片SOP-8 丝印TLO62C 双路通用运算放大器芯片

TL062CDR是一款非常通用的运算放大器&#xff0c;它可以被广泛应用在各种电子产品和系统中。以下是一些可能使用TL062CDR的具体产品类别和应用示例&#xff1a; 1. 模拟滤波器&#xff1a;在音频设备&#xff0c;如耳机放大器、音响系统和声音处理器中&#xff0c;TL062CDR可以…

对Windows超融合S2D的一些补充

先说一个不知道算不算BUG的例子&#xff0c;下面这个存储池是用两台服务器各2块10G建立的&#xff0c;除去系统保留的部分&#xff0c;显示还有13G可用。 但如果使用其新建虚拟磁盘会显示可用的空间为0 然后我又各增加了一块10G硬盘进池&#xff0c;变成了可用空间为30.5GB …

VM 安装Ubuntu20

1、VM 新建虚拟机 类型配置 - 典型 安装源选择 &#xff08;安装包获取&#xff1a;Ubuntu桌面系统 | Ubuntu&#xff09; 设置计算机名与用户账号密码 为虚拟机命一个名&#xff0c;设置虚拟机文件保存的位置 设置磁盘相关信息 最后一步&#xff0c;确定虚拟机的相关参数 设置…

ansible-3

目录 一、Templates 模块 1.1.先准备一个以 .j2 为后缀的 template 模板文件&#xff0c;设置引用的变量 1.2.修改主机清单文件&#xff0c;使用主机变量定义一个变量名相同&#xff0c;而值不同的变量 1.3.编写 playbook 二、tags 模块 三、Roles 模块 四、编写模块 4…

10、算数运算符(以 ‘/’、‘%’、‘++’为主去讲解)(Java超详细版本)

算数运算符 一、算数运算符二、“ / ”的使用三、“ % ”的使用四、“ ”的使用⭐ 一、算数运算符 算数运算符是对数值类型的变量进行运算的&#xff0c;在Java程序中使用的非常多的。 二、“ / ”的使用 1、Java中 “ / ” 的运算结果是省略小数部分的整数&#xff0c;不存…

【人工智能】博弈搜索(极小极大值、α-β剪枝)

1. 极小极大值算法 人工智能中 “博弈” 通常专指博弈论专家们称为有完整信息的、确定性的、轮流行动的、两个游戏者的零和游戏&#xff08;如国际象棋)。术语中&#xff0c;这是指在确定的、完全可观察的环境中两个 Agent必须轮流行动&#xff0c;在游戏结束时效用值总是相等并…

MCP3008-I/SL 模数转换器ADC SPI接口 模拟信号采集

MCP3008-I/SL 模数转换器ADC 贴片SOIC16 MCP3008-I/SL 是一款模数转换器&#xff08;ADC&#xff09;&#xff0c;属于 SAR&#xff08;逐次逼近寄存器&#xff09;架构的 ADC。它具有以下特点&#xff1a; 8 通道单 ADC 最大采样率&#xff1a;200ksps&#xff08;千样点每秒…

MySQL-ELK基础

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

STM32CubeMX学习笔记32---FreeRTOS资源管理

一、CPU利用率简介 1 基本概念 CPU 使用率其实就是系统运行的程序占用的 CPU 资源&#xff0c;表示机器在某段时间程序运行的情况&#xff0c;如果这段时间中&#xff0c;程序一直在占用 CPU 的使用权&#xff0c;那么可以人为 CPU 的利用率是 100%。CPU 的利用率越高&#xf…

C语言:__attribute__((packed))

一、简介 在使用结构体的时候&#xff0c;经常要根据结构体的长度来进行相关判断。但是按照C语言的规则&#xff0c;会对不同类型的数据类型进行自动对齐。有时候就会造成一些问题&#xff0c;如果不需要使用自动对齐的功能&#xff0c;就需要使用到本章的关键字。 二、自动对…

CFETS系统介绍

CSTP服务是什么 CSTP&#xff08;CFETS Straight Through Process&#xff09;是交易中心为外汇市场提供的数据直通式处理接口服务。用户通过标准式接口将本方交易数据直接从交易中心的服务器接收下来&#xff0c;根据需要对数据进行处理并导入到中、后台系统。其基本功能包括…

【JUC】并发编程 Synchronized 锁升级原理

Synchronized如何实现同步/互斥的效果&#xff1f; monitorenter&#xff1a; 将锁对象对象头中Mark Word的前30bit替换成指向操作系统中与其关联的monitor对象&#xff0c;将锁记录位状态改为10 monitorexit&#xff1a; 将锁对象对象头中Mark Word进行重置&#xff0c;重新恢…

活动预告 | 5月16日 Streaming Lakehouse Meetup · Online 与你相约!

随着 Apache Flink 技术社区的不断成熟和发展&#xff0c;越来越多企业开始利用 Flink 进行流式数据处理&#xff0c;从而提升数据时效性价值&#xff0c;获取业务实时化效果。与此同时&#xff0c;在大数据领域数据湖架构也日益成为新的技术趋势&#xff0c;越来越多企业开始采…

从谚语:“一手交钱,一手交货来”谈谈什么是数据库事务

事务与交易 一手交钱&#xff0c;一手交货 一手交钱&#xff0c;一手交货&#xff0c;谚语&#xff0c;意思是指钱和货当场相交&#xff0c;互不拖欠。出自明朝施耐庵《水浒传》第二一回。 Transaction 意思 我们先来看一下来自于剑桥英-英词典的解释&#xff1a; transac…

手游广告归因新选择:Xinstall助力精准衡量投放效果

在手游市场竞争日益激烈的今天&#xff0c;广告主们面临着如何精准衡量广告投放效果的难题。手游广告归因平台的出现&#xff0c;为广告主们提供了一种全新的解决方案。而Xinstall&#xff0c;作为其中的佼佼者&#xff0c;正以其独特的优势&#xff0c;助力广告主们破解这一难…

GIS 中的空间模式

空间模式显示了地球上事物的相互联系方式。这些图案可以是天然的或人造的。当我们使用 GIS 时&#xff0c;我们可以看到事物的位置以及它们之间的关系。今天&#xff0c;让我们关注地理和 GIS 领域的空间模式。 点分布的类型 点分布是将特定位置映射为地图上的单个点的方式。这…

如何用二维码实现现代仓库管理?(附详细实现过程)

简道云团队曾参与过近300企业的仓库管理软件的部署&#xff0c;要想知道如何实现用二维码管理仓库&#xff0c;首先要对整体流程有清晰的框架&#xff01; 1、产品数据的录入2、设计电子库存卡3、库存盘点单4、库存盘点报表 总结一下就是——数卡单表&#xff0c;四步实现&…

USB3.0接口——(1)基础知识

1.背景 USB 3.0是一种USB规范&#xff0c;该规范由英特尔等公司发起。 USB协议版本 命名约定 USB-IF组织引入命名约定&#xff0c;将端口列为 USB 5 Gbps、USB 10 Gbps、USB 20 Gbps 、USB 40 Gbps&#xff0c;而不使用版本号。获得 USB-IF 认证的 USB 产品的制造商会获得带…