说明

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清除缓存后即可正常使用

源码

https://github.com/shawnxt/hexo-filter-inline-image.git

hexo相对路径图片显示的更多相关文章

  1. WPF之路一:相对路径图片显示

    由于公司项目的需要,改为WPF开发,因此需要学习WPF,遇到的第一个问题就是在显示的图片的时候,写绝对路径,图片显示没有问题,但是写相对路径的时候,发现图片无法正常显示,在网上搜了一下,得到的答案是需 ...

  2. Django Admin 图片路径设置显示为图片(imageField显示方法设置)

    一  使用环境 开发系统: windows IDE: pycharm 数据库: msyql,navicat 编程语言: python3.7  (Windows x86-64 executable in ...

  3. WPF 图片显示中的保留字符问题

    在WPF中显示一张图片,本是一件再简单不过的事情.一张图片,一行XAML代码即可. 但是前段时间遇到了一件奇怪的事: 开发机上运行正常的程序,在某些客户机器上却显示不了图片,而且除了这个问题,其它运行 ...

  4. java web图片显示到浏览器

    今天研究了一下午,图片显示问题. jsp中获取绝对路径的方法:String contextPath = request.getContextPath();String path = request.g ...

  5. VS2010 MFC GDI+ 实现PNG透明图片显示

    网上找了一些资料学习了一下PNG图的显示,这里总结一下. 参考:http://blog.csdn.net/czyt1988/article/details/7965066 一.VS2010配置GDI+ ...

  6. 在VC6中基于dll开发插件用于各种图片显示(BMP/TGA/JPG/GIF/PNG/TIF/ICO/WMF/EMF/...)

    一.图片显示 图片显示的方法: 1.  直接写程序 2.  第3方库 3.  调用COM组件的IPicture接口 4.  使用MFC的CPictureHolder类 5.  使用GDI+的CImag ...

  7. layui.table图片显示不全和404问题

    1.图片显示不全 在使用layui.table组件中,加载的图片显示不全,需重新定义CSS如下: .layui-table-cell{ height: auto!important; white-sp ...

  8. Dubbo整合SpringCloud图片显示问题

    Dubbo整合SpringCloud图片显示问题 Tips:公司项目,记录一点经验吧,理解的不对的地方欢迎大神指点 问题:商品图片上传功能(公司没有专门文件服务器)写的保存目录直接是保存在docker ...

  9. 使用freemarker生成word、html时图片显示问题

    使用freemarker生成word.html时图片显示问题 博客分类: Java 使用freemarker生成word时图片显示问题使用freemarker生成html时图片显示问题使用iText生 ...

  10. HTML基础——网站图片显示页面

    1.图片标签 <img /> 属性: src:指的是图片显示的路径(位置) 绝对路径:D:\Pictures\Saved Pictures 相对路径: ①同一级:直接写文件名称或者./文件 ...

随机推荐

  1. node_modules修改?

    1.直接改node_modules的内容..... 但是下次npm i之后那个包的代码又恢复原状 2.独立维护需要改的包 把需要改的包复制下来,修改,推送到npm上. 项目里用新包即可,但是增加了维护 ...

  2. WSL2安装了Ubuntu之后root不知道密码

    更新了WSL2,安装完 Ubuntu 只要求新建账号和密码,不知道root密码,各种不方便Ubuntu 的默认 root 密码是随机的,即每次开机都有一个新的 root 密码在终端输入命令 sudo ...

  3. Linux下查找并杀死 zombile 和 stopped 进程

    用top命令查看系统运行情况,突然发现stopped和zombile进程个数居然不是0. [root@myos software]# top top - 11:20:17 up 60 days, 17 ...

  4. httprunner运行遇到彻底解决安装包过程中的Requirement already satisfied:问题

    deMacBook-Pro:bndcs yuansanmei$ python3 -m pip install httprunner==v4.3.0Requirement already satisfi ...

  5. 阻止form表单默认跳转

    form表单提交后,会默认跳转

  6. 使用@RequestBody注解接收的实体类中的某些参数为null

    原因 postman调试接口 为null的参数命名不符合"驼峰法",类似实体类A的属性 cEnterpriseId ,这种命名是不规范的 和lombook的@Data注解有关 用p ...

  7. Python下使用argparse模块的脚本参数配置

    python的一个用于命令行参数解析的模块,其专业解释已经有很多了,可以去详查,不做赘述,仅谈谈自己的一些理解. 为什么要用argparse模块来为代码导入参数或者文件路径呢?如果是一个简单的项目,输 ...

  8. fastadmin打包插件

    <?php namespace app\command; use think\console\Command; use think\console\Input; use think\consol ...

  9. Java数组之什么是数组?+ 数组的声明和创建

    数组 数组是相同类型数据的有序集合. 数组描述的是相同类型的若干个数据,按照一定的先后次序排序组合而成. 其中,每一个数据称作一个数组元素,每个数组元素可以通过一个下标来访问它们. 数组声明创建 首先 ...

  10. Jmeter进行服务器性能压力测试遇问题及解决方案

    最近再给公司的一个项目进行服务器性能进行压测,要出一些报告图形展示,放弃了用boom工具我选择了用jmeter工具进行压测过程中遇到了一些问题下面将一一列出及解决方案希望帮助到你们!!! 1.装第三方 ...