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

news2025/1/24 22:38:50

插件及说明查找过程

  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.coloradmin.cn/o/1279261.html

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

相关文章

C语言之结构体

一.前言引入. 我们知道在C语言中有内置类型,如:整型,浮点型等。但是只有这些内置类 型还是不够的,假设我想描述学⽣,描述⼀本书,这时单⼀的内置类型是不⾏的。描述⼀个学⽣需要名字、年龄、学号、⾝⾼、体…

vue $nextTick 样式私有化

$nextTick 先updated中更新,再nextTick 状态更改做什么事情: updated $nextTick 同步执行完之后,把当前放到队列中 $forceUpdate->sub.update() // 把更新操作放在队列里面 队列机制 基于发布订阅模式,callbacks队列 更新完毕…

Java类的初始化顺序

类初始化顺序遵循以下三个原则(优先级依次递减) 1、静态对象(变量)优先于非静态对象(变量)初始化,其中静态对象(变量)只初始化一次,而非静态对象&…

揭秘原型链:探索 JavaScript 面向对象编程的核心(上)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

[UnityWebGL]修改webgl启动模板

首先了解什么是WEBGGL启动模板,如下图: 其次,启动模板在哪里设置,如下图: 最后,怎么改启动模板里面的内容(提供最简单的方式,直接改官方的): 1、首先在Asset…

Spring Cloud Gateway与spring-cloud-circuitbreaker集成与理解

官方文档 spring-cloud-gateway文档地址: https://spring.io/projects/spring-cloud-gateway#overview spring-cloud-circuitbreaker文档地址: https://spring.io/projects/spring-cloud-circuitbreaker 两者关系 首先spring-cloud-gateway集成了断路…

[c++]——string类____详细初步了解string类的运用

在成为大人的路上喘口气. 目录 🎓标准库类型string 🎓定义和初始化string对象 💻string类对象的常见构造 💻string类对象的不常见构造 💻读写string对象 🎓 string类对象的修改操作 &#x1f4…

Opencv制作电子签名(涉及知识点:像素过滤,图片通用resize函数,像素大于某个阈值则赋值为其它的像素值)

import cv2def resize_by_ratio(image, widthNone, heightNone, intercv2.INTER_AREA):img_new_size None(h, w) image.shape[:2] # 获得高度和宽度if width is None and height is None: # 如果输入的宽度和高度都为空return image # 直接返回原图if width is None:h_ratio …

git-6

1.如何用project管理issue? 用project看板管理issue 有五种类型:None、Basic kanban、Automated kanban、Automated kanban with reviews、Bug triage 首先选用Bug triage 利用看板就会很直观,很便捷,Issues也支持,有…

OpenTelemetry系列 - 第4篇 OpenTelemetry K8S生态

目录 一、【Helm】添加OTel Helm repo二、【Helm Chart】OTel Collector2.1 daemonset2.2 deloyment 三、【K8S Operator】OTel Operator3.1 安装OTel Operator3.2 部署OpenTelemetryCollector3.2.1 Deloyment Mode3.2.2 DeamonSet Mode3.2.3 StatefulSetMode3.2.4 Sidecar Mod…

思维模型 莫扎特效应

本系列文章 主要是 分享 思维模型,涉及各个领域,重在提升认知。音乐激发无限潜能。 1 莫扎特效应的应用 1.1 莫扎特效应在教育领域的应用-Baby Einstein”公司 在美国,有一家名为“Baby Einstein”的公司,该公司生产和销售专门为…

SQL自学通之简介

目录 一、SQL 简史 二、数据库简史 1、Dr. Codds 对关系型数据库系统的十二条规则 2、设计数据库的结构 3、数据库的前景 4、对于什么是客户机/服务器型电脑系统 BernardH.Boar的定义如下: 5、交互式语言 6、易于实现 7、SQL 总览 三、流行的 SQL 开发工具…

前端小记--2.element-ui中级联选择器cascader如何默认展开下拉框

最近做项目时,遇到一个需求:在一个排班表中,展示人员的值班情况,点击单元格,弹出下拉框,修改人员排班信息。 由于下拉框选择内容是树状结构,这里使用了element-ui中级联组件cascader&#xff0c…

一起学docker系列之十七Docker Compose 与手动操作的比较与优势分析

目录 1 前言2 不使用 Docker Compose2.1 启动 MySQL 容器2.2 启动 Redis 容器2.3 启动微服务容器 3 使用 Docker Compose4 使用 Docker Compose 的优势5 结语参考地址 1 前言 在当今容器化应用的开发与部署中,容器编排工具的选择对于简化流程、提高效率至关重要。本…

6-69.鸭子也是鸟

按要求完成下面的程序: 1、定义一个Bird类,包含一个void类型的无参的speak方法,输出“Jiu-Jiu-Jiu”。 2、定义一个Duck类,公有继承自Bird类,其成员包括: (1)私有string类型的成员na…

WPF实现文字纵向排布的TabItem

文章目录 基本用法文字竖排显示 WPF布局 基本用法 WPF中的TabControl是一个容器控件,用于在单个窗体或页面中承载多个选项卡。每个选项卡可以包含不同的控件,用于显示不同的内容,其最简单的调用方法如下,只需在TabControl中无脑…

德迅云安全的日常网站安全性措施、以及更多网站安全工具的推荐与使用。

要确保网站的安全性,可以采取以下措施: 更新和维护:定期更新网站的操作系统、应用程序和插件,确保使用的是最新版本,以修复已知的安全漏洞。 强密码策略:使用强密码,包含字母、数字和特殊字符的…

合成相机模型【图形学】

相机在计算机图形学中有两个方面的考虑:相机的位置和相机的形状。 要了解后者,我们需要了解相机的工作原理。 NSDT工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - R…

BearPi Std 板从入门到放弃 - 1 引气入体篇

安装相关开发工具 Keil MDK 工具下载 略, 自行体会 Keil 芯片支持包下载 Keil 包 网址 https://www.keil.com/pack 此处下载的是STM32L4xx的支持包 https://www.keil.com/pack/Keil.STM32L4xx_DFP.2.6.2.pack STM32CubeMX 下载与包下载 i. 下载(需要使用用户&…

爬虫学习(三)用beautiful 解析html

安装库 import requests from bs4 import BeautifulSoup headers {"User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0"} for start_num in range(0,250…