首页 > 其他分享 >hexo 博客插入本地图片时遇到的坑

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

时间:2024-05-08 19:12:01浏览次数:16  
标签:插件 hexo image 博客 插入 asset 文章 图片

哈喽大家好,我是咸鱼。

最近一直在折腾博客的事,说是 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,image,博客,插入,asset,文章,图片
From: https://www.cnblogs.com/edisonfish/p/18180672

相关文章

  • 个人练习(每个同学都要提交)——学习和使用多个平台上的测试工具 请使用两种以上平台上
    答:在"校园跑腿"项目中,我们可以使用两种不同的测试工具来确保软件的质量和稳定性。这些测试工具可以包括自动化测试工具和手动测试工具。以下是两种测试工具的介绍以及如何在项目中使用它们:SeleniumWebDriver(自动化测试工具):SeleniumWebDriver是一个流行的自动化测试工具,用于测......
  • 个人练习(每个同学都要提交)——学习和使用多个平台上的测试工具 请使用两种以上平台上
    在本小组项目中,我们使用以下两种平台上的测试工具:Postman和Swagger。Postman:Postman是一款功能强大的API测试工具,可以用于创建、调试和测试API。首先,我们需要创建一个Postman账号,并安装Postman应用程序。在项目中,我们可以使用Postman来进行API端点的测试。我们可以创建多个请求......
  • +63+条消息++狂神+docker+学习笔记_GaleTeng+的博客+-+CSDN+博客
    +63+条消息++狂神+docker+学习笔记_GaleTeng+的博客+-+CSDN+博客文章目录前言Docker概述1.Docker为什么会出现?2.Docker历史3.Docker能干嘛Docker安装1.Docker的基本组成2.安装Docker3.阿里云镜像加速4.回顾HelloWorld流程5.底......
  • +63+条消息++狂神+docker+学习笔记_GaleTeng+的博客+-+CSDN+博客
    +63+条消息++狂神+docker+学习笔记_GaleTeng+的博客+-+CSDN+博客文章目录前言Docker概述1.Docker为什么会出现?2.Docker历史3.Docker能干嘛Docker安装1.Docker的基本组成2.安装Docker3.阿里云镜像加速4.回顾HelloWorld流程5.底......
  • 一键自动化博客发布工具,用过的人都说好(阿里云篇)
    阿里云有个开发者社区,入驻过的朋友可能想要把自己的博客发布到阿里云社区上。今天我来介绍一下blog-auto-publishing-tools自动发布博客到阿里云的实现原理。阿里云的博客发布界面比较简单,只有标题,正文,摘要,关联试用产品,发布子社区,文章图片这几个选项。一起来看看如何实现吧。......
  • 没有查询、插入、更新、删除权限
    2024-05-0815:22:23报错原文cmdTransaction:TheINSERTpermissionwasdeniedontheobject'tb_Vendor_CocImgs',database'QSIDB',schema'dbo'.TheINSERTpermissionwasdeniedontheobject'tb_Vendor_CocImgs',databa......
  • 创建个人博客网站记录-2.3 建立模型以及对应的CRUD操作
    2.3、建立模型以及对应的CRUD操作在本节中,创建了USER用户类和BLOG博文类两个对象类,并实现了其基本的增删改查的操作。#flaskr/models.pyfromflaskimportgfromflask_sqlalchemyimportSQLAlchemyfromsqlalchemyimportColumn,Integer,String,TIMESTAMP,ForeignKey,T......
  • 关于单向不循环链表的创建、插入、删除、遍历、检索
    关于单向不循环链表的创建、插入、删除、遍历、检索单向不循环链表公式初始化单向不循环链表构建单向不循环链表结构体//创建结构体类型typedefstructone_way_node{//数据域chardata[DATA_LEN];//指针域structone_way_node*next;}ONE_WAY_NOD......
  • Hexo搭建个人博客
    Hexo搭建个人博客1、Hexo框架介绍官网:https://hexo.io/zh-cn/docs/2、框架的本地安装与运行npminstallhexo-cli-ghexoinitblogcdblognpminstallhexoserver3、框架的基本结构与打包后的文件介绍目录结构生成静态网站的命令hexogeneratehexog生成好......
  • 项目冲刺——第 1 篇 Scrum 冲刺博客
    作业所属课程所属课程作业要求作业要求作业目标敏捷开发前的安排一、各个成员在Alpha阶段认领的任务二、明日各个成员的任务安排成员任务肖杨、梁丽贤搭建前端开发框架黄诃华、欧文杰编写数据库姚佳如、李慧娣不断根据需求完善功能设计,......