记录一次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 引用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/190985.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux中文件的打包压缩、解压,下载到本地——zip,tar指令等

目录 1 .zip后缀名: 1.1 zip指令 1.2 unzip指令 2 .tar后缀名 3. sz 指令 4. rz 指令 5. scp指令 1 .zip后缀名: 1.1 zip指令 语法:zip [namefile.zip] [namefile]... 功能:将目录或者文件压缩成zip格式 常用选项&#xff1a…

ZLMediakit-method ANNOUNCE failed: 401 Unauthorized(ffmpeg、obs推流rtmp到ZLM发现的问题)

错误截图 解决办法 修改配置文件config.ini 改成0 修改之后 重启服务 systemctl restart zlm*推流成功

LeetCode(47)合并区间【区间】【中等】

目录 1.题目2.答案3.提交结果截图 链接: 合并区间 1.题目 以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间,并返回 一个不重叠的区间数组,该数组需恰好覆盖输入中…

算法竞赛中的输入输出框架

例题&#xff1a;输入一些整数&#xff0c;求出它们的最小值、最大值和平均值&#xff08;保留三位小数&#xff09;。输入保证这些数都是不超过1000的整数。 这个题目关键在于&#xff1a;整数的个数是不确定的。下面直接给出程序&#xff1a; #include<stdio.h> int m…

第九节HarmonyOS 常用基础组件5-LoadingProgress

一、LoadingProgress LoadingProgress组件用于显示加载动效的组件&#xff0c;比如应用的登录界面&#xff0c;当我们点击登录的时候&#xff0c;显示的“正在登录”的进度条状态。LoadingProgress的使用非常简单&#xff0c;只需要设置颜色和宽高就可以了。 Entry Component …

目标检测——Fast R-CNN算法解读

论文&#xff1a;Fast R-CNN 作者&#xff1a;Ross Girshick 链接&#xff1a;https://arxiv.org/abs/1504.08083 代码&#xff1a;https://github.com/rbgirshick/fast-rcnn 目录 1、算法概述2、Fast R-CNN细节2.1The RoI pooling layer2.2 Fine-tuning for detection2.3 Fast…

工业机器视觉megauging(向光有光)使用说明书(十三,资源发现bug,已经更新)

megauging&#xff08;向光有光&#xff09;旧资源有bug&#xff0c;已经更新&#xff0c;如下&#xff1a; 第一工具&#xff0c;combox默认0&#xff0c;选择后&#xff0c;鼠标点击“获取结果”&#xff0c;相机就取一帧图像处理后显示出来&#xff1a; 第一工具&#xff0…

YOLOv5算法进阶改进(7)— 将主干网络SPPF更换为SimSPPF / SPP-CSPC / SPPF-CSPC

前言:Hello大家好,我是小哥谈。SimSPPF是YOLOv6中提出的一种改进的空间金字塔池化方法,它是SPPF的升级版。SimSPPF通过在不同尺度上使用不同大小的池化核来提取特征,从而提高了检测器的性能。与SPPF相比,SimSPPF可以在不增加计算成本的情况下提高检测器的性能。本节课就教…

Flask使用线程异步执行耗时任务

1 问题说明 1.1 任务简述 在开发Flask应用中一定会遇到执行耗时任务&#xff0c;但是Flask是轻量级的同步框架&#xff0c;即在单个请求时服务会阻被塞&#xff0c;直到任务完成&#xff08;注意&#xff1a;当前请求被阻塞不会影响到其他请求&#xff09;。 解决异步问题有…

记录 | photoshop移动选区

期望达到的效果&#xff1a; 选择一块区域&#xff0c;并移动它 操作&#xff1a; (1) 选择矩形选框工具&#xff0c; (2) 对区域进行选取&#xff0c; (3) 选择移动工具&#xff0c; (4) 移动选区&#xff0c;效果如下&#xff0c;

学习TypeScrip2(任意类型any和unknown)

Any 类型 和 unknown 顶级类型 1.没有强制限定哪种类型&#xff0c;随时切换类型都可以 我们可以对 any 进行任何操作&#xff0c;不需要检查类型 let anys:any 123 anys 123 anys true 2.声明变量的时候没有指定任意类型默认为any let anys; anys 123 anys true 3.弊端…

已知数组A[1..n]中元素类型为非负整数,设计算法将其调整为左右两部分,左边所有为奇数,右边所有为偶数,并要求算法的时间复杂度为O(n)

//左边奇数右边偶数 void Swap(int* a, int* b) {int tmp *b;*b *a;*a tmp; } void LeftRight(int arr[],int n) {int i 0;int j n - 1;while(i<j){if (arr[i] % 2 0 && arr[j] % 2 1) {Swap(&arr[i], &arr[j]);i;j--;}else if (arr[i] % 2 1 &…

Next.js初步使用

文章目录 安装和运行页面静态文件 React初步&#xff0c;但不熟悉React也可以学习本文。 安装和运行 Next.js是一个基于React的服务端渲染框架&#xff0c;可以实现构建高性能、可扩展的React应用&#xff0c;提供了很多方便的工具和功能&#xff0c;包括自动代码分割、服务器…

Java研学-IO流(三)

六 字节流 – 字节输出流系列 OutPutStream体系 1 OutPutStream系列 – 字节输出流 // 表示字节输出流所有类的超类&#xff0c;输出流接受输出字节并将其发送到某个接收器 public abstract class OutputStreamFileOutputStream/BufferedOutputStream 2 FileOutputStream类设…

pyqt5使用pyqtgraph实现动态热力图

pyqt5使用pyqtgraph实现动态热力图 一、效果图 二、流程 1、打开Designer创建一个UI界面 2、把UI转成py 3、创建一个main.py文件 4、在main文件中渲染画布、创建初始数据、画热力图、创建更新数据线程、绑定按钮触发事件三、UI界面 其中h_map.py代码如下: # -*- coding: ut…

1688API接口系列,1688开放平台接口使用方案(商品详情数据+搜索商品列表+商家订单类)

1688商品详情接口是指1688平台提供的API接口&#xff0c;用于获取商品详情信息。通过该接口&#xff0c;您可以获取到商品的详细信息&#xff0c;包括商品标题、价格、库存、描述、图片等。 要使用1688商品详情接口&#xff0c;您需要先申请1688的API权限&#xff0c;并获取ac…

变量和引用

变量和引用 2.1.深入认识变量 2.1.1.什么是变量 变量是在程序中保存用户数据的一段内存存储空间&#xff0c;变量名是内存空间的首地址 变量三要素&#xff1a;名称、类型、值 2.1.2.变量的名称 组成: 字母、数字、下划线组成&#xff0c;不能以数字开头 变量名称的长…

蓝桥杯每日一题2023.12.2

题目描述 蓝桥杯大赛历届真题 - C 语言 B 组 - 蓝桥云课 (lanqiao.cn) 题目分析 答案&#xff1a;3598180 由题目分析可以知道&#xff0c;给小明发的牌一共有13种类型&#xff0c;每种类型的牌一共有四张。对于每种牌&#xff0c;我们都有5种选择&#xff0c;不拿、拿一张、…

LeetCode - 965. 单值二叉树(C语言,二叉树,配图)

二叉树每个节点都具有相同的值&#xff0c;我们就可以比较每个树的根节点与左右两个孩子节点的值是否相同&#xff0c;如果不同返回false&#xff0c;否则&#xff0c;返回true。 如果是叶子节点&#xff0c;不存在还孩子节点&#xff0c;则这个叶子节点为根的树是单值二叉树。…

FFmpeg命令行使用小结

文章目录 前言一、视频1.1 修改格式转码1.2 截取片段1.3 合并多个视频1.4 裁剪区域1.5 修改分辨率1.6 翻转视频1.7 调整速度1.8 多个视频拼接1.9 添加字幕1.10 修改文件封面1.11 添加文字水印1.12 制作画中画1.13 音视频混合/分离1.14 视频直播推流1.15 m3u8切片 二、音频2.1 视…