记录一次vscode markdown的图片路径相关插件学习配置过程
插件及说明查找过程
- csdn搜索
markdown图片路径,找到关于这一款插件的回答。 - 打开vscode拓展搜索
Paste Image这款插件,看到下载量挺高的,应该不赖。

- 点击
仓库,进入该插件开源的github仓库,查看README文件阅读说明.
淡然在Vscode 插件项目下的细节一栏也可以看到README文件.
点击进入仓库: github - Paste Image

- 看到在此README文件中,包含使用方法、配置方法、 配置案例、版本迭代说明、提建议(联系方式)、许可证、捐赠。
反思总结
- 使用方法尽量查看作者原文,此博文仅记录方法。
- 只是关心此插件的使用方法,所以具体的开源项目代码不必查看。
- 文档说明很详细,遇到不会的利用chatgpt3.5、有道词典、百度等渠道了解,同时避免深挖对于当下不必要的细节。
知识拓展
1. 路径分隔符
unix是/ , 而windows是\,而\在json中是转义字符,在json中需要用\\表示路径分隔符。
2.一些英文
extension:拓展名,用作ext的拓展名
${currentFileNameWithoutExt}: the current file name without ext.
variable:变量
2. Base64介绍
Base64 是一种用于表示二进制数据的编码方式,它将二进制数据转换成由 64 个字符组成的 ASCII 字符串。这种编码方式的主要目的是使二进制数据能够以文本的形式安全传输,并且可以在文本协议中嵌入二进制数据,如在 HTML、CSS、JavaScript 和 XML 中。
Base64 的特点:
字符集: Base64 编码使用 64 个字符,包括大小写字母(A-Z, a-z)、数字(0-9)和两个特殊字符(+ 和 /)。有时候,尾部可能会有一个或两个等号(=)作为填充字符。
长度增加: 由于 Base64 编码会将三个字节的二进制数据编码成四个字符,所以编码后的字符串长度通常比原始二进制数据长 1/3。
不可逆性: Base64 是一种编码而非加密,它是不可逆的。即使将 Base64 编码的字符串解码回原始数据,也无法还原到原始的二进制数据。
为什么使用 Base64?
传输二进制数据: 在一些文本协议或格式中,只允许传输文本数据,无法直接传输二进制数据。使用 Base64 可以将二进制数据编码成文本形式,方便传输。
嵌入图片和文件: 在 HTML、CSS 或 JavaScript 中,可以将图片或其他二进制文件以 Base64 编码的形式嵌入,而不必额外加载文件。
数据 URI: 使用 Base64 可以创建数据 URI,将小型图像或其他数据直接嵌入到网页中,减少 HTTP 请求。
Base64 编码示例:
考虑一个字符串 “Hello, World!” 的 Base64 编码示例:
将字符串转换为二进制数据:
01001000 01100101 01101100 01101100 01101111 00101100 00100000 01010111 01101111 01110010 01101100 01100100 00100001
将每三个字节的二进制数据分组,并在每组的前面添加一个 0 作为填充:
010010 000110 010101 100110 110011 011011 000110 110011 011011 110110 011100 110110 011111 001011 110000 000100 010110 000111 011011 110111 011100 100010 011011 010000 110100 110010 000001
使用 Base64 字符集将每组的 6 个比特编码成一个字符:
SGVsbG8sIFdvcmxkIQ==
这就是字符串 “Hello, World!” 的 Base64 编码结果。解码该字符串将得到原始的二进制数据。在编码和解码过程中,Base64 提供了一种可靠的方式来表示二进制数据,以便在文本环境中使用。
为什么小型图片适合使用 URL:
减小传输体积: Base64 编码会使图片文件大小增加约 1/3,这对于本身就较小的图片来说,不划算。小型图片通过 URL 直接引用,可以减小传输体积,加快加载速度。
减少加载时间: 对于小型图片,直接使用 URL 引用可以减少 HTML 文件的体积,提高页面加载速度。这在移动端和网络条件较差的情况下尤为重要。
何时使用 Base64 编码:
图片较小且需要嵌入: 对于一些小型的图标、按钮等,如果需要将其直接嵌入到 HTML、CSS 或 JavaScript 中,使用 Base64 编码是一种方便的做法。
减少 HTTP 请求: 在某些情况下,可以将一些小型的背景图片或图标转码为 Base64,以减少对服务器的 HTTP 请求,从而提高页面加载性能。
大小图片的界定:
“小型图片”通常指的是文件大小较小的图片,例如图标、按钮、小型图形等。这个界定没有一个固定的数值,因为它取决于具体的应用场景和对性能的要求。通常,一些 KB 级别的图片可以考虑直接使用 URL 引用,而大型图片则更适合以文件形式存在,并通过 URL 引用。
相关文章:
记录一次vscode markdown的图片路径相关插件学习配置过程
插件及说明查找过程 csdn搜索markdown图片路径,找到关于这一款插件的回答。打开vscode拓展搜索Paste Image这款插件,看到下载量挺高的,应该不赖。 点击仓库,进入该插件开源的github仓库,查看README文件阅读说明. 淡然在Vscode 插件项目下的细…...
设计原则 | 依赖转置原则
一、依赖转置原则(DIP:Dependence Inversion Principle) 1、原理 高层模块不应该依赖低层模块,二者都应该依赖于抽象抽象不应该依赖于细节,细节应该依赖于抽象 2、层次化 Booch曾经说过:所有结构良好的面…...
前端开发实用技巧与经验分享
导语:在前端开发领域,掌握一些实用的技巧和经验可以帮助你更高效地完成任务。本文将分享一些前端开发的实用技巧和经验,帮助你在工作中更好地应对各种挑战。 一、使用开发者工具进行调试和优化 熟练掌握浏览器开发者工具的使用,…...
推荐一款Excel快速加载SQL的插件,方便又好用
如果告诉你只需要双击一下,SQL数据库中存放在表里面的数据,就能加载到你的Excel中,你想不想要? 今天给大家推荐一款好用的Excel插件,安装简单,使用方便,是经常使用SQL数据库的不二。 这款插件…...
Docker快速入门(docker加速,镜像,容器,数据卷常见命令操作整理)
Docker本质是将代码所需的环境依赖进行打包运行,而在Docker中最重要的是镜像和容器 镜像:可以简单地理解为每启动一个docker镜像就会占用计算机一个进程,这个进程和另外起的docker镜像的进程是相互独立的,以数据库为例,每个镜像都会copy一份数据库,在他所在的进程中.别的镜像在…...
http和https的区别有哪些
目录 HTTP(HyperText Transfer Protocol) HTTPS(HyperText Transfer Protocol Secure) 区别与优势 应用场景 未来趋势 当我们浏览互联网时,我们经常听到两个常用的协议:HTTP(HyperText Tra…...
使用Keil-MDK生成*.bin格式可执行文件
使用Keil-MDK生成*.bin格式可执行文件 文章目录 使用Keil-MDK生成*.bin格式可执行文件前言一、fromelf.exe工具二、使用方法1.配置输出2.输出格式 前言 在使用Keil MDK的集成开发环境中,默认情况下可以生成*.axf格式的调试文件和*.hex格式的可执行文件。虽然文件可…...
基于springboot+vue篮球联盟管理系统源码
🍅 简介:500精品计算机源码学习 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 文末获取源码 目录 一、以下学习内容欢迎交流: 二、文档资料截图: 三、项目技术栈 四、项目运行图 背景: 篮球运…...
分页助手入门以及小bug,报sql语法错误
导入坐标 5版本以上的分页助手 可以不用手动指定数据库语言,它会自动识别 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.3.2</version> </dependency&g…...
Java中的并发编程:深入理解CountDownLatch
Java中的并发编程:深入理解CountDownLatch 本文将深入探讨Java中的并发编程,重点关注CountDownLatch的使用。通过理解这些概念和技术,我们可以编写出更高效、稳定的Java程序。 一、CountDownLatch简介 CountDownLatch是Java中的一个同步工具…...
Windows 安装 flash-attention 和 bitsandbytes
首先保证cuda版本为12.1,torch版本为2.1.0及以上,python版本3.10以上 从此处下载最新版的whl,https://github.com/jllllll/bitsandbytes-windows-webui/releases/tag/wheels,通过whl来安装bitsandbytes 从此处下载最新版的whl&a…...
AHB 与 DMA
AHB(先进高性能总线) 随着深亚微米工艺技术日益成熟,集成电路芯片的规模越来越大。数字IC从基于时序驱动的设计方法,发展到基于IP核复用的设计方法,并在SOC设计中得到了广泛应用。在基于IP核复用的SoC(Syst…...
React使用echarts并且修改echarts图大小
React使用echarts 引入 npm install --save echarts-for-react npm install --save echarts使用 <ReactEChartsoption{option}notMerge{true}lazyUpdate{true}style{{"width": "100%","height": "800px"}}theme{"theme_nam…...
【Q6-30min】
1. ifndef/define/endif的作用:避免头文件被重复引用。 2.堆栈溢出主要的原因是: (1)函数调用层次太深。函数递归调用时,系统要在栈中不断保存函数调用时的现场和产生的变量,如果递归调用太深,…...
C++之类和对象(下)
目录 初始化列表 static成员 C11对于非静态成员变量初始化 友元 友元函数 友元类 总结 初始化列表 我们知道,在学习构造函数时,我们知道对象的成员变量的初始化我们是在构造函数函数体内进行初始化的,还有没有其它初始化成员变量的方…...
微服务开发:断路器详解
微服务是目前业界使用的最重要的实现方面。通过使用微服务架构,开发人员可以消除他们以前在单体应用程序中遇到的许多问题。展望未来,人们开始在微服务中搜索和采用各种模式。大多数时候,新模式的产生是为了解决另一个模式中出现的常见问题。…...
Leetcode—383.赎金信【简单】
2023每日刷题(五十) Leetcode—383.赎金信 实现代码 class Solution { public:int arr[26] {0};int arr2[26] {0};bool canConstruct(string ransomNote, string magazine) {int len ransomNote.size();int len2 magazine.size();for(int i 0; i …...
爬虫-xpath篇
1.xpath的基础语法 表达式描述nodename选中该元素/从根节点选取、或者是元素和元素间的过渡//从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置.选取当前节点…选取当前节点的父节点选取属性text()选取文本 举例: 路径表达式结果html选择html元…...
Oracle初始化参数文件pfile和spfile
pfile :Oracle 9i之前,ORACLE一直采用PFILE方式存储初始化参数,该文件为文本文件,可以在操作系统级别修改。当spfile文件修改出现错误导致oracle无法启动时,可以使用 pfile文件启动数据库 spfile:从Oracle…...
zookeeper 客户端常用命令简单记录(实操课程系列--watcher功能测试)(发布订阅功能测试)
本系列是zookeeper相关的实操课程,课程测试环环相扣,请按照顺序阅读测试来学习zookeeper。阅读本文之前,请先阅读----zookeeper 单机伪集群搭建简单记录(实操课程系列) 1、命令行工具切换到zookeeper的bin目录下面&am…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
