hexo相对路径图片显示
说明
hexo的图片默认不支持相对路径。需要配置 post_asset_folder 选项,设置从false改成true之后支持。但是要求图片目录必须和文件名相同。
由于我在typore下的markdown资源图片都是放在images目录下面,以相对路径方式引用。与hexo配置不兼容,并且我也不想去修改目录结构。因此花一天写了个hexo插件,来实现相对路径图片页面展示的功能。
这个插件的目的如下:
图片可以为hexo的_posts目录下的任意目录下的资源图片,文章内可以使用相对路径引用,在模板渲染时,插件会将相对路径的图片转为inline模式,以base64编码直接在html内引用。这样就不会出现目录问题。
使用方式
1. 安装插件:
安装命令如下
npm i hexo-filter-inline-image
2. 配置hexo启用插件
_config.yml 增加以下配置
inline_image:
enabled: true
compress: false
remote: false
limit: 2048
compress 是否启用图片压缩
remote 是否转换http和https图片,默认关闭
limit 限制图片大小(kb)在此以内才会进行转换
注意:
由于本身Hexo带有缓存会导致插件第一次使用可能会出现无效果,请使用hexo clean清除缓存后即可正常使用
源码
hexo相对路径图片显示的更多相关文章
- WPF之路一:相对路径图片显示
由于公司项目的需要,改为WPF开发,因此需要学习WPF,遇到的第一个问题就是在显示的图片的时候,写绝对路径,图片显示没有问题,但是写相对路径的时候,发现图片无法正常显示,在网上搜了一下,得到的答案是需 ...
- Django Admin 图片路径设置显示为图片(imageField显示方法设置)
一 使用环境 开发系统: windows IDE: pycharm 数据库: msyql,navicat 编程语言: python3.7 (Windows x86-64 executable in ...
- WPF 图片显示中的保留字符问题
在WPF中显示一张图片,本是一件再简单不过的事情.一张图片,一行XAML代码即可. 但是前段时间遇到了一件奇怪的事: 开发机上运行正常的程序,在某些客户机器上却显示不了图片,而且除了这个问题,其它运行 ...
- java web图片显示到浏览器
今天研究了一下午,图片显示问题. jsp中获取绝对路径的方法:String contextPath = request.getContextPath();String path = request.g ...
- VS2010 MFC GDI+ 实现PNG透明图片显示
网上找了一些资料学习了一下PNG图的显示,这里总结一下. 参考:http://blog.csdn.net/czyt1988/article/details/7965066 一.VS2010配置GDI+ ...
- 在VC6中基于dll开发插件用于各种图片显示(BMP/TGA/JPG/GIF/PNG/TIF/ICO/WMF/EMF/...)
一.图片显示 图片显示的方法: 1. 直接写程序 2. 第3方库 3. 调用COM组件的IPicture接口 4. 使用MFC的CPictureHolder类 5. 使用GDI+的CImag ...
- layui.table图片显示不全和404问题
1.图片显示不全 在使用layui.table组件中,加载的图片显示不全,需重新定义CSS如下: .layui-table-cell{ height: auto!important; white-sp ...
- Dubbo整合SpringCloud图片显示问题
Dubbo整合SpringCloud图片显示问题 Tips:公司项目,记录一点经验吧,理解的不对的地方欢迎大神指点 问题:商品图片上传功能(公司没有专门文件服务器)写的保存目录直接是保存在docker ...
- 使用freemarker生成word、html时图片显示问题
使用freemarker生成word.html时图片显示问题 博客分类: Java 使用freemarker生成word时图片显示问题使用freemarker生成html时图片显示问题使用iText生 ...
- HTML基础——网站图片显示页面
1.图片标签 <img /> 属性: src:指的是图片显示的路径(位置) 绝对路径:D:\Pictures\Saved Pictures 相对路径: ①同一级:直接写文件名称或者./文件 ...
随机推荐
- #maxlength vs #size form api reference
#maxlength Used by: password, textfield Description: The maximum amount of characters to accept as i ...
- PCA降维练习
[题目] 1.现有我国大陆30个省.直辖市.自治区的经济发展状况数据集如表所示,包括8项经济指标:国民生产总值(A1):居民消费水平(A2):固定资产投资(A3):职工平均工资(A4):货物周转量(A ...
- 正则表达式re.compile()的使用
re 模块提供了不少有用的函数,用以匹配字符串,比如: compile 函数match 函数search 函数findall 函数finditer 函数split 函数sub 函数subn 函数re ...
- MulVAL攻击图的推理规则
MulVAL ( multihost, multistage, vulnerability analysis) 是由普林斯顿大学的 Ou 等开发的 Linux 平台开源攻击图生成工具,基于 Nessu ...
- bilibili经典面试题
1. 如何向面试官解释什么是Redis,看看普通人和高手是如何回答的?_哔哩哔哩_bilibili 2.Java面试热点问题,synchronized原理剖析与优化_哔哩哔哩_bilibili 3.黑 ...
- C# DateTime转换为字符串
12小时制:DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss") 24小时制:DateTime.Now.ToString("yyyy- ...
- python下载文件headers
from aiohttp import webfrom urllib.parse import quote r = web.Response()# r.content_type = 'applicat ...
- SPI接口(续二)
接下来看SPI接收器数据寄存器RXDAT,下表是它的全部位结构,其地址分别为0x40058014(SPI0).0x4005C014(SPI1). (1)第0到15位(RXDAT)为接收器数据,它包含接 ...
- C# winfrom 添加Log4Net日志库
简介:log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具.当项目发布之后遇到一些问题,无法 ...
- Linux基础第十一章:日志文件及如何使用rsyslog搭建小型日志服务器
一.日志文件 1.日志作用 2.常用日志 3.日志级别 二.Rsyslog日志处理系统 1.使用Rsyslog创建日志有点 2.Rsyslog配置文件解析 3.使用rsyslog将ssh服务的日志单独 ...