当前位置: 首页 > news >正文

记录一次vscode markdown的图片路径相关插件学习配置过程

插件及说明查找过程

  1. csdn搜索markdown图片路径,找到关于这一款插件的回答。
  2. 打开vscode拓展搜索Paste Image这款插件,看到下载量挺高的,应该不赖。
    在这里插入图片描述
  3. 点击仓库,进入该插件开源的github仓库,查看README文件阅读说明.
    淡然在Vscode 插件项目下的细节一栏也可以看到README文件.

点击进入仓库: github - Paste Image

在这里插入图片描述

  1. 看到在此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版本以上的分页助手 可以不用手动指定数据库语言&#xff0c;它会自动识别 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.3.2</version> </dependency&g…...

Java中的并发编程:深入理解CountDownLatch

Java中的并发编程&#xff1a;深入理解CountDownLatch 本文将深入探讨Java中的并发编程&#xff0c;重点关注CountDownLatch的使用。通过理解这些概念和技术&#xff0c;我们可以编写出更高效、稳定的Java程序。 一、CountDownLatch简介 CountDownLatch是Java中的一个同步工具…...

Windows 安装 flash-attention 和 bitsandbytes

首先保证cuda版本为12.1&#xff0c;torch版本为2.1.0及以上&#xff0c;python版本3.10以上 从此处下载最新版的whl&#xff0c;https://github.com/jllllll/bitsandbytes-windows-webui/releases/tag/wheels&#xff0c;通过whl来安装bitsandbytes 从此处下载最新版的whl&a…...

AHB 与 DMA

AHB&#xff08;先进高性能总线&#xff09; 随着深亚微米工艺技术日益成熟&#xff0c;集成电路芯片的规模越来越大。数字IC从基于时序驱动的设计方法&#xff0c;发展到基于IP核复用的设计方法&#xff0c;并在SOC设计中得到了广泛应用。在基于IP核复用的SoC&#xff08;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的作用&#xff1a;避免头文件被重复引用。 2.堆栈溢出主要的原因是&#xff1a; &#xff08;1&#xff09;函数调用层次太深。函数递归调用时&#xff0c;系统要在栈中不断保存函数调用时的现场和产生的变量&#xff0c;如果递归调用太深&#xff0c;…...

C++之类和对象(下)

目录 初始化列表 static成员 C11对于非静态成员变量初始化 友元 友元函数 友元类 总结 初始化列表 我们知道&#xff0c;在学习构造函数时&#xff0c;我们知道对象的成员变量的初始化我们是在构造函数函数体内进行初始化的&#xff0c;还有没有其它初始化成员变量的方…...

微服务开发:断路器详解

微服务是目前业界使用的最重要的实现方面。通过使用微服务架构&#xff0c;开发人员可以消除他们以前在单体应用程序中遇到的许多问题。展望未来&#xff0c;人们开始在微服务中搜索和采用各种模式。大多数时候&#xff0c;新模式的产生是为了解决另一个模式中出现的常见问题。…...

Leetcode—383.赎金信【简单】

2023每日刷题&#xff08;五十&#xff09; 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选中该元素/从根节点选取、或者是元素和元素间的过渡//从匹配选择的当前节点选择文档中的节点&#xff0c;而不考虑它们的位置.选取当前节点…选取当前节点的父节点选取属性text()选取文本 举例&#xff1a; 路径表达式结果html选择html元…...

Oracle初始化参数文件pfile和spfile

pfile &#xff1a;Oracle 9i之前&#xff0c;ORACLE一直采用PFILE方式存储初始化参数&#xff0c;该文件为文本文件&#xff0c;可以在操作系统级别修改。当spfile文件修改出现错误导致oracle无法启动时&#xff0c;可以使用 pfile文件启动数据库 spfile&#xff1a;从Oracle…...

zookeeper 客户端常用命令简单记录(实操课程系列--watcher功能测试)(发布订阅功能测试)

本系列是zookeeper相关的实操课程&#xff0c;课程测试环环相扣&#xff0c;请按照顺序阅读测试来学习zookeeper。阅读本文之前&#xff0c;请先阅读----zookeeper 单机伪集群搭建简单记录&#xff08;实操课程系列&#xff09; 1、命令行工具切换到zookeeper的bin目录下面&am…...

Phi-4-reasoning-vision-15B在金融图表分析中的实战:趋势识别与异常定位

Phi-4-reasoning-vision-15B在金融图表分析中的实战&#xff1a;趋势识别与异常定位 1. 金融图表分析的挑战与机遇 金融从业者每天需要分析大量图表数据&#xff0c;从K线图到财务报表&#xff0c;从趋势分析到异常检测。传统的人工分析方法存在三个明显痛点&#xff1a; 效…...

CosyVoice-300M Lite实战案例:在线教育语音课件生成系统

CosyVoice-300M Lite实战案例&#xff1a;在线教育语音课件生成系统 1. 为什么在线教育需要专属语音合成系统&#xff1f; 你有没有遇到过这样的场景&#xff1a;一位初中物理老师想为“浮力原理”这节课制作配套音频讲解&#xff0c;但反复试了三款主流TTS工具——要么普通话…...

解决QGIS 3.22.4编译后启动报错:从‘dll未加载’到‘plugins缺失’的实战排错记录

QGIS 3.22.4编译后启动报错的深度排查与解决方案 当你终于完成了QGIS 3.22.4的源码编译&#xff0c;满怀期待地双击qgis.exe时&#xff0c;却遭遇了"qgis_app.dll无法加载"的报错。这就像跑完马拉松却在终点线前摔倒一样令人沮丧。但别担心&#xff0c;这些问题其实都…...

别再裸奔你的实时数据流了!用Python+Starlette给SSE接口加个Header认证门卫

实时数据流安全加固&#xff1a;PythonStarlette实现SSE接口的Bearer Token认证 想象一下&#xff0c;你精心构建的实时数据看板突然被不明身份的用户随意访问&#xff0c;敏感的业务指标像超市促销传单一样被任意获取——这不是危言耸听&#xff0c;而是许多开发者在使用SSE技…...

Llama-3.2V-11B-cot实操手册:构建带反馈机制的迭代式视觉推理Agent

Llama-3.2V-11B-cot实操手册&#xff1a;构建带反馈机制的迭代式视觉推理Agent 你有没有遇到过这种情况&#xff1f;给AI看一张复杂的图表或流程图&#xff0c;它要么答非所问&#xff0c;要么只能给出一个笼统的、没有逻辑链条的答案。你心里想&#xff1a;“它到底是怎么得出…...

OpenGL 3D项目避坑指南:从贴图资源获取到交互菜单设计,我的CPT205大作业复盘

OpenGL 3D项目避坑指南&#xff1a;从贴图资源获取到交互菜单设计 当第一次接触OpenGL 3D项目时&#xff0c;许多计算机图形学学习者都会陷入相似的困境——如何在有限时间内完成一个既美观又功能完整的作品&#xff1f;本文将以CPT205课程大作业为例&#xff0c;分享从资源获取…...

结合卷积神经网络思想优化BERT文本分割边界判定

结合卷积神经网络思想优化BERT文本分割边界判定 文本分割&#xff0c;简单来说&#xff0c;就是把一大段连续的文字&#xff0c;按照意思或者结构&#xff0c;切成一个个有意义的片段。这听起来简单&#xff0c;但在实际应用中&#xff0c;比如处理会议记录、客服对话或者网络…...

电脑系统由硬件系统和软件系统组成(来源网络,原创)

电脑系统由硬件系统和软件系统组成&#xff08;来源网络&#xff0c;原创&#xff09;电脑系统由硬件系统和软件系统组成。软件指操作硬件的各种语言或程序&#xff0c;硬件是指电脑系统中我们看得见、摸得着的物理设备。电脑硬件系统由运算器、控制器、存储器、输入设备和输出…...

gorilla/sessions深度解析:Cookie与文件系统存储实战

gorilla/sessions深度解析&#xff1a;Cookie与文件系统存储实战 【免费下载链接】sessions Package gorilla/sessions provides cookie and filesystem sessions and infrastructure for custom session backends. 项目地址: https://gitcode.com/gh_mirrors/se/sessions …...

奇偶判断算法的极端实现与优化

1. 奇偶判断算法的极端实现&#xff1a;从40亿条if语句到机器码优化1.1 项目背景与设计动机在计算机科学领域&#xff0c;判断数字奇偶性通常采用取模运算这一经典方法。然而&#xff0c;一个看似荒谬的想法引发了技术人员的深入思考&#xff1a;是否可以通过穷举所有可能的数字…...