这里嵌入指不会因为本地文件丢失而丢失。

参考:https://blog.csdn.net/testcs_dn/article/details/78952358

https://blog.csdn.net/testcs_dn/article/details/78952358

使用 Data Url 将文件存入 markdown 文档流

在线生成Data Url:

http://imgbase64.duoshitong.com/

https://tool.css-js.com/base64.html

使用 Data Url 的不足:

1、会让文档体积变得很大!

2、IE6/7是不支持Data URL技术的,不幸的是在中国还有很多用户在使用这种古老的浏览器。希望各方面包括官方和民间都多做努力工作,让现代浏览器(谷歌浏览器,火狐浏览器,IE11+)尽快的占领市场,这是我们Web程序员最大的愿望。

使用 Data Url 的优点:

说到Data URI的优点,自然少不了“减少链接数”,把图片转为Base64编码,以减少图片的链接数。我们先想当然一下,同样一张图片,如果不用发起一个下载请求,打开速度是会更快的。但是,有几个问题需要关注下:

图片始终是要下载的,那么下载一张图片的速度快还是下载一堆编码快?

浏览器对图片的显示,处理效率哪个更快?

图片的缓存问题

  原文测试,使用Data URL方式的Demo在渲染时会比不使用 多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍 。由此可见,使用Data URl方式还是需要更多的考量,在可接受的范围内适量使用。

markdown嵌入图片的更多相关文章

  1. MarkDown插入图片

    MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...

  2. 为jquery qrcode生成的二维码嵌入图片

    在一次微信项目中,需要实现通过扫描二维码来进行会议签到,二维码的生成选择了qrcode.js的版本,然后使用jquery.qrcode.js插件来绘制二维码. <script type=&quo ...

  3. 关于Markdown插入图片路径错误的问题

    关于Markdown插入图片路径错误的问题 开发问题 解决方法  妈耶,连续一天写2篇博客,也是醉了,这篇博客主要是介绍关于Markdown插入图片路径错误的问题 在上篇中,我介绍了一下Markdow ...

  4. 可嵌入图片视频jQuery全屏滑块

    分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览   源码下载 实现的代码. html代码:     <script type ...

  5. markdown的图片外链

    markdown的图片用本地的很不方便,今天试用了一下七牛的服务,感觉很好用.推荐一下,免费的服务够用并且比较友好.

  6. Markdown引用图片,且不使用网上链接的解决方法

    首先介绍下markdown使用图片的3种方法 使用本地图片,缺点是要用到本地的绝对路径,不适合对文档做迁移,否则会有图片链接失效的情况 ![thisisimage](C:\\Users\\Goose\ ...

  7. html5--1.9 img元素嵌入图片

    html5--1.9 img元素嵌入图片 学习要点: img元素嵌入图片学习一个新属性:title 1.img的属性 1.src:必要属性,制定图片来源的路径; 2.alt属性:当图片无法显示时的替代 ...

  8. 【Tips】有道云笔记中Markdown插入图片

    在有道云笔记中用MarkDown插入图片 新建一个文档专门用来放图片 把所有要用的图片专门放在一个笔记里,用普通模式先同步笔记,然后用分享笔记 会有一个链接,用浏览器打开这个分享的笔记就能找到所有的图 ...

  9. 优雅地在markdown插入图片

    markdown 中插入图片,好烦!!!   喜欢用Markdown写文字,但是它的图片引用是一个大问题(当然csdn不会遇到这个问题).借用第三方将图片储存在印象笔记上是一个好办法.但是会出现的一个 ...

随机推荐

  1. CodeMonkey少儿编程第3章 times循环

    目标 了解程序由哪三种基本的结构组成 了解循环的概念 掌握times的结构与用法 三种基本结构 计算机程序由三种最基本的结构组成,它们分别是: 顺序结构 循环结构 选择结构 千万不要被这些陌生的术语给 ...

  2. 忒修斯的Mac

    我有一台Mac笔记本,用了快6年了,当初买它的时候还借了几千块. 三年前,它的屏幕坏了,修理的方式就是直接换屏,而换屏其实就是上半部分连壳带屏幕整个换掉,简单的说:另一台电脑的上半身嫁接过来. 今年, ...

  3. 1.Spring的基本应用

    1.1概述 1.1.1 Spring是什么 Spring一个轻量级的框架,以IOC(控制反转)和AOP(面向切面编程)为内核,Spring在表现层提供了Spring MVC的框架整和功能,在业务逻辑层 ...

  4. python生成器 递归

    生成器 生成器:只要函数体内出现yield关键字,那么再执行函数就不会执行函数代码,会得到一个结果,该结果就是生成器   生成器就是迭代器   yield的功能 1.yield为我们提供了一种自定义迭 ...

  5. apk开发环境!多亏这份《秋招+金九银十-腾讯面试题合集》跳槽薪资翻倍!再不刷题就晚了!

    开头 最近很多网友反馈:自己从各处弄来的资料,过于杂乱.零散.碎片化,看得时候觉得挺有用的,但过个半天,啥都记不起来了.其实,这就是缺少系统化学习的后果. 为了提高大家的学习效率,帮大家能快速掌握An ...

  6. VMware中安装Ubuntu后,安装VMwareTools提示“Not enough free space to extract VMwareTools-10.3.10-13959562.tar.gz”的解决办法

    将加载后的Vmware Tools中的*.tar.gz文件复制到桌面后提取,否则会报错:

  7. LVS负载均衡NAT模式原理介绍以及配置实战

    LVS基本原理 流程解释: 当用户向负载均衡调度器(Director Server)发起请求,调度器将请求发往至内核空间 PREROUTING 链首先会接收到用户请求,判断目标 IP 确定是本机 IP ...

  8. timeout of 20000ms exceeded

    前端:axios请求超时 axios 中有两种超时错误,一种是 HTTP 的超时,另一种是你自定的超时时间. 请求多次,设置拦截器 ---在main.js设置全局的请求次数,请求的间隙 推荐解决方法: ...

  9. 使用Redis有序集合实现投票排行榜系统

    https://mp.weixin.qq.com/s/GcPF8jte8Nzi4Ae0jojXuQ 先说最简单的排行榜.其实之前我们有个用于投票的系统,但是他没有用有序集合,他是这样做的:用redis ...

  10. 阿里云弹性公网IP那些事 阿里云云栖号 6月1日 弹性公网IP是独立的公网IP资源,可以绑定到阿里云专有网络VPC类型的ECS、NAT网关、私网负载均衡SLB上,并可以动态解绑,实现公网IP和ECS、NAT网关、SLB的解耦,满足灵活管理的要求。阿里云弹性公网IP那些事 阿里云云栖号 6月1日 弹性络VPC类型的E

    阿里云弹性公网IP那些事 阿里云云栖号 6月1日 弹性公网IP是独立的公网关.私网负载均衡SLB上,并可以动态解绑,实现公网IP和ECS.NAT网关.SLB的解耦,满足灵活管理的要求.