记录一次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.mfbz.cn/a/223561.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

minio的k8s的单机部署

minio的k8s的单机部署 apiVersion: apps/v1 kind: Deployment metadata:name: minionamespace: itshare spec:replicas: 1selector:matchLabels:app: miniotemplate:metadata:labels:app: miniospec:containers:- name: minioimage: minio/minio:RELEASE.2022-10-15T19-57-03Z…

微服务开发:断路器详解

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

MySQL Server 层和引擎层是如何交互的

Server 层、引擎层、BufferPool、磁盘间的关系 大体来说, MySQL可以分为Server层和存储引擎层两部分。 1)Server 层:Server 层包括连接器、查询缓存、分析器、优化器、执行器等,涵盖MySQL的大多数核心服务功能,以及所…

深信服行为管理AC设置禁止用户使用向日葵等远程软件

需求:在特定的时间内禁止内外网用户使用向日葵、todesk等远程软件;只禁止使用专业的远程软件,内网的ssh、telnet、RDP需要正常放行 AC版本:AC13.0.62.001 Build20221107 通过访问权限策略来控制 1、行为管理→访问权限策略→新…

基于springboot+vue篮球联盟管理系统源码

🍅 简介:500精品计算机源码学习 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 文末获取源码 目录 一、以下学习内容欢迎交流: 二、文档资料截图: 三、项目技术栈 四、项目运行图 背景: 篮球运…

「智慧城市」这一概念科学吗?还是炒作?

智慧城市是一个综合性的概念,它利用信息技术和创新概念,将城市的各个系统和服务集成起来,以提升城市运行效率、优化城市管理和服务,改善市民的生活质量。 具体来说,智慧城市涵盖了许多领域,包括城市规划、建…

【408】计算机学科专业基础 - 计算机组成原理

一、计算机系统概述 【复习提示】 本章是组成原理的概述,考查时易针对有关概念或性能指标出选择题,也可能综合后续章节的内容出有关性能分析的综合题。掌握本章的基本概念,是学好后续章节的基础。部分知识点在初学时理解不深刻也无须担忧&am…

uni-app中vue3表单校验失败

目录 1.问题 2.原因及解决方式 3.表单校验方式&#xff08;vue3&#xff09; 1.问题 在app中使用uni-forms表单&#xff0c;并添加校验规则&#xff0c;问题是即使输入内容&#xff0c;表单校验依然失败。 代码&#xff1a; <template><view><uni-forms r…

案例052:用于日语词汇学习的微信小程序

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

Nginx跨域配置

一 跨域概述 1.1 同源策略 同源策略是一个安全策略。同源&#xff0c;指的是协议&#xff0c;域名&#xff0c;端口相同。浏览器处于安全方面的考虑&#xff0c;只允许本域名下的接口交互&#xff0c;不同源的客户端脚本&#xff0c;在没有明确授权的情况下&#xff0c;不能读…

【SVM】不同数据划分方式导致结果不同...

此帖是一个自我纠查帖&#xff0c;感觉基本不会有其他人踩相同的坑。 背景&#xff1a;在MI分类中使用FBCSPSVM&#xff0c;基于这个方法写了两个分类的.py文件实现&#xff0c;在数据划分上大差不差&#xff08;都是CV5&#xff09;&#xff0c;但是结果却相差很多 方法一&a…

自定义数组,循环展示对象数据,vue3监视数组

HTML <div v-for"(item, index) in dataList" :key"index"> <span>{{ item.title }}:</span> <span>{{ dataInfo[item.content] }}</span> </div> JS 需要展示的键值对放入数组中 let dataList [ { title: data1, co…

慎用!3个容易被打的Python恶搞脚本

Python 无限恶搞朋友电脑&#xff0c;别提有多爽了&#xff0c;哈哈&#xff0c;打造自己的壁纸修改器&#xff0c;电脑无限锁屏&#xff0c; 无线弹窗&#xff0c;都在这里&#xff01;&#xff01;&#xff01; 1、修改电脑桌面壁纸 工具使用 开发环境&#xff1a;python3…

Python替代Adobe从PDF提取数据

大家好&#xff0c;PDF文件是官方报告、发票和数据表的通用格式&#xff0c;然而从PDF文件中提取表格数据是一项挑战。尽管Adobe Acrobat等工具提供了解决方案&#xff0c;但它们并不总是易于获取或可自动化运行&#xff0c;而Python则是编程语言中的瑞士军刀。本文将探讨如何利…

有线传输介质

目录 1、双绞线 &#xff08;1&#xff09;无屏蔽双绞线 UTP(Unshielded Twisted Pair) &#xff08;2&#xff09;屏蔽双绞线 STP (Shielded Twisted Pair) &#xff08;3&#xff09;布线标准EIA/TIA-568-&#xff21; &#xff08;4&#xff09;双绞线的特点 2、同轴电…

Java异常讲解

&#x1f435;本篇文章将对异常相关知识进行讲解 一、异常的结构 在程序执行的过程中出现的一些问题叫做异常&#xff0c;异常其实是一个一个类&#xff0c;每一种异常都代表一个类 1.1 几种常见的异常 System.out.println(10/0); //算数异常 //Exception in thread "m…

从零开始学习 JavaScript APl(七):实例解析关于京东案例头部案例和放大镜效果!

大家好关于JS APl 知识点已经全部总结了&#xff0c;第七部部分全部都是案例部分呢&#xff01;&#xff01;&#xff08;素材的可以去百度网盘去下载&#xff01;&#xff01;&#xff01;&#xff09; 目录 前言 一、个人实战文档 放大镜效果 思路分析&#xff1a; 关于其它…

西工大计算机学院计算机系统基础实验一(函数编写11~14)

稳住心态不要慌&#xff0c;如果考试周冲突的话&#xff0c;可以直接复制这篇博客和上一篇博客西工大计算机学院计算机系统基础实验一&#xff08;函数编写1~10&#xff09;-CSDN博客最后的代码&#xff0c;然后直接提交&#xff0c;等熬过考试周之后回过头再慢慢做也可以。 第…

androidstudio设置内存

androidstudio一直 scanning files to index&#xff0c;需要去设置内存&#xff1a; 操作如下&#xff1a;
最新文章