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

参考: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. oracle ORA-00060死锁查询、表空间扩容

    --查看被锁住的表 select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,dba_objects ...

  2. 5V 升压 8.4V,5V 转 8.4V 做两节锂电池充电芯片

    5V 升压 8.4V SOT23-6 封装的六脚升压 IC PW5300 是一颗 DC-DC 异步整流升压转换器芯片,输入电压范围 2.6V-5.5V.最高输出 电压 12V, PW5300 是一种电 ...

  3. QTextEdit的paste

    By 鬼猫猫 20130117 http://www.cnblogs.com/muyr/ 背景 QTextEdit中粘贴一大段文字时,EasyDraft中粘贴进去的文字们的格式就乱了,处于无格式.还有 ...

  4. Python小度

    这只是一个对话器!还不能听歌(反正我也没在UNIT平台配置听歌的功能)! 反正最近也不知怎么的,就想做一个AI对话器语音识别和语音输出都不要,input()和print()就行本来准备用小爱的,但要实 ...

  5. 大促密集,CDN如何保障电商体验如丝般顺滑?

    简介: 前不久,阿里云技术天团空降CSDN在线峰会,对核心技术竞争力进行解读.其中,阿里云高级技术专家曾福华分享了<双11: CDN如何保障电商大促如丝般顺滑>的议题.俗话说:养兵千日,用 ...

  6. 深圳某小公司面试题:AQS是什么?公平锁和非公平锁?ReentrantLock?

    AQS总体来说没有想象中那么难,只要了解它的实现框架,那理解起来就不是什么问题了. AQS在Java还是占很重要的地位的,面试也是经常会问. 目前已经连载11篇啦!进度是一周更新两篇,欢迎持续关注 [ ...

  7. Failed to start LSB: starts php-fpm

    跟nginx一样都是进程占用,记录下 [root@localhost pazzn]# systemctl status php-fpm.service ● php-fpm-72.service - L ...

  8. Mysql 四种事务隔离级别

    一.前提 时过一年重新拾起博文记录,希望后面都能坚持下来. 接着之前MySql的学习,先记录下这篇. 以下都是基于mysql8 innodb存储引擎进行分析的. 二.事务的ACID特性 A(Atomi ...

  9. Folly解读(零) Fbstring—— 一个完美替代std::string的库

    string 常见的三种实现方式 eager copy COW SSO Fbstring 介绍 Storage strategies Implementation highlights Benchma ...

  10. C链表-C语言入门经典例题

    struct student { long num; float score; struct student *next; }; 注意:只是定义了一个struct student类型,并未实际分配存储 ...