实现步骤

第一步:修改项目根目录下的_config.yml文件参数post_asset_folder值为true

# 开始使用本地静态资源
post_asset_folder: true

第二步:安装插件hexo-asset-image

# 在项目根目录下执行
npm install https://github.com/xcodebuild/hexo-asset-image.git --save

完成上述配置后,在使用命令hexo new post新建文章时,将会在source/_posts目录下创建一个与文章同名的目录。

hexo new post "测试文章"
|____scaffolds
|____source
| |_____posts
| | |____测试文章.md
| | |____测试文章 # 与文章同名的目录,用于保存在文章中引入的本地图片资源
|____themes

如上,新建“测试文章.md”时,将会在_posts目录下创建同名文件夹“测试文章”,在“测试文章.md”文件中需要引入的图片文件只要放在目录“测试文章”下即可。

图片引用方式:

# 引用图片的时候一定要带上目录名称作为路径
![本地图片](测试文章/本地图片.jpg)

使用该方式引用的图片既可以在本地预览,正式发布之后也能正常显示。

原理说明

显然,在hexo中引入图片的方式稍微有点繁琐,即:必须在_post目录下新建一个与文章同名的目录,然后将需要引用的图片文件都放在该目录中。

还好使用插件hexo-asset-image能够帮助我们自动创建图片目录(每次都会自动创建,如果在文章中不需要引用图片资源,可以手动将该目录删除)。

那么,为什么需要将文章引用的图片放置在与文章同名的目录呢?

原因是:在执行hexo g命令的时候会将文章转换为一个index.html文件,该文件路径为public/年/月/日/文章名称/index.html,同时也会将文章中引用的图片文件拷贝到与index.html文件相同的目录中。

另外,转换后的index.html文件保存路径中有一个年/月/日,这是在项目配置文件_config.ymlpermalink参数中配置的,默认值为:

permalink: :year/:month/:day/:title/

【参考】

https://leay.net/2019/12/25/hexo/ Hexo 引用本地图片以及引用本地任意位置图片的一点思路

https://blog.csdn.net/LiuChengYu520/article/details/82657407 hexo-asset-image使用方法

https://blog.glwsq.cn/2019/10/22/41cc6f18/ hexo-asset-image【让本地和网页都正常显示图片】

http://www.itomtan.com/2017/09/29/the-problem-when-use-post-asset-folder/ Hexo开启post_asset_folder后, 安装hexo-asset-image,不起作用的问题

在Hexo中引入本地图片的实现的更多相关文章

  1. Hexo中添加本地图片

    First 1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true 2 在你的hexo目录下执行这样一句话npm install hexo-asset ...

  2. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  3. 在InternetExplorer.Application中显示本地图片

    忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  在InternetExplorer.Application中显示本地图片 « 对VBS效率的再思考——处理二进制数据 Wo ...

  4. tomcat中显示本地图片①(未解决)

    <本模块文仅作为学习过程中的自我总结,有需要可参看,欢迎指导与提出建议,很多地方可能断章取义,理解不到位,虚心求学.谢谢!> 资料查阅原因:2018/7/10(做项目中显示详情页面,从数据 ...

  5. jsp引入本地图片

    jsp引入本地图片 通用解决方法: 在tomcat的server.xml配置文件中,在<host></host>标签中间添上一句 <!-- docBase : 磁盘绝对路 ...

  6. Vue - 引入本地图片的两种方式

    第一种,只引入单个图片,这种引入方法在异步中引入则会报错. 比如需要遍历出很多图片展示时 <image :src = require('图片的路径') /> 第二种,可引入多个图片,也可引 ...

  7. webpack配置less以及js中引入的图片问题

    1.问题重现 当我做了这个配置以后,发现less里的图片可以正常展现到页面,但是js里的图片以及其他文件都不能正常展现,都报404 原始配置如下: // 如果有額外的.babelrc配置的話就可以使用 ...

  8. vue中data中引用本地图片报错404

    首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...

  9. vue中引入静态图片

    vue+webpack中,可以使用require imageList: [ { url: require('../image/pig.png') } ] vue+vite没有require方法 // ...

  10. tomcat中显示本地图片①(已解决)

    解决方案 我直接放源码了. 原理就是:我虽然调用的是虚拟目录,但是会映射到对应路径的实际 第一步:(在tomcat的 server.xml中创建一个虚拟目录) 虚拟目录创建方式: <Contex ...

随机推荐

  1. [转帖]SQL Server数据库存储总结

    SQL Server数据库存储文件类型:数据文件和日志文件.数据文件以页面作为存储单元存储数据. 页面:即数据页面,数据页(Page).是系统在磁盘间中分配的一段大小为8k的连续空间. 文件头(Fil ...

  2. [转帖]docker使用buildx构建多平台(x86,arm64)构架镜像

    https://blog.csdn.net/atzqtzq/article/details/128583331 配置文件激活buildx docker目前使用版本为Server Version: 20 ...

  3. [转帖]Python连接Oracle数据库进行数据处理操作

    https://www.dgrt.cn/a/2259443.html?action=onClick 解决以下问题: Python连接Oracle数据库,并查询.提取Oracle数据库中数据? 通过Py ...

  4. [转帖]Unixbench服务器综合性能测试方法及工具下载

    UnixBench是一款开源的测试 unix 系统基本性能的工具,是比较通用的测试VPS性能的工具. UnixBench会执行一系列的测试,包括2D和3D图形系统的性能衡量,测试的结果不仅仅只是CPU ...

  5. 【计数,DP】CF1081G Mergesort Strikes Back

    Problem Link 现有一归并排序算法,但是算法很天才,设了个递归深度上限,如果递归深度到达 \(k\) 则立即返回.其它部分都和正常归并排序一样,递归中点是 \(\lfloor (l+r)/2 ...

  6. 震惊p div 标签 可以编辑高度随内容的编辑而发生变化

    震惊p标签可以编辑高度随内容的编辑而发生变化### 1==>只可编辑,粘贴复制字段长度不正常 <p contenteditable="true" >这是一个可编辑 ...

  7. 【NSSCTF-Round#16】 Web和Crypto详细完整WP

    每天都要加油哦!    ------2024-01-18  11:16:55 [NSSRound#16 Basic]RCE但是没有完全RCE <?php error_reporting(0); ...

  8. 微信小程序-页面生命周期方法

    在经过上一篇文章的介绍之后,我们知道了大体的生命周期在什么时候执行,这次主要是以代码的形式来展示一下具体的阶段执行什么生命周期方法. 首先我们编写一个代码可以从首页跳转到日志页面: <!--in ...

  9. 【Trento】遥感图像数据集提供下载

    遥感图像处理学习(11)之Trento数据集 前言 遥感系列第11篇.遥感图像处理方向的学习者可以参考或者复刻 本文初编辑于2024年1月18日 2024年1月25日搬运至本人博客园平台 最近在复现论 ...

  10. DC-9渗透学习

    开靶机,net模式,启动 arp-scan -l命令扫描存活主机 nmap -sS -sV -A -n 192.168.100.22 ┌──(root㉿kali)-[~] └─# nmap -sS - ...