将图片内嵌入Markdown文档中

将图片嵌入Markdown文档中一直是一个比较麻烦的事情。通常的做法是将图片存入本地某个路径或者网络存储空间,使用URL链接的形式插入图片:

![image][url_to_image]

这样做一个明显的麻烦之处在于处理图片与Markdown文档的一致性上。如果我们要拷贝文档,或者图片遭到误删/云端链接失效,就会变得不便。最让我们省心的方法便是将图片直接放到文档内部。

一个将图片嵌入文档中的方法是使用base64编码。步骤比较简单:

  1. 将图片或截图保存在本地;
  2. 使用在线工具将图片转码至base64编码; link1);
  3. 在文档中插入编码:
![image][data:image/png;base64, ......]

当然base64编码一般很长,直接将编码放入段落内部会影响正常编辑。通常的做法是将base64编码定义到一个中间变量中,将编码本体放到文档末:(示例见本站19文件存储结构网页)

![image][root_img]
continue edit your document here ... [root_img]:data:image/png;base64, ......

使用该技巧的时候需要注意,并不是所有的Markdown编辑器都支持这种方法。而且一些Markdown编辑器只支持特定的图片格式。如有道云笔记只支持png格式的图片编码。需要在保存图片文件的时候加以注意。

01将图片嵌入到Markdown文档中的更多相关文章

  1. 将图片嵌入到markdown文档中

    转自KFXW的专栏 将图片嵌入Markdown文档中一直是一个比较麻烦的事情.通常的做法是将图片存入本地某个路径或者网络存储空间,使用URL链接的形式插入图片: ![image][url_to_ima ...

  2. 如何在Markdown文档中插入空格?

    简单说 在 Markdown 文档中,可以直接采用 HTML 标记插入空格(blank space),而且无需任何其他前缀或分隔符.具体如下所示: 插入一个空格 (non-breaking space ...

  3. python实现解析markdown文档中的图片,并且保存到本地~

    背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...

  4. 使用Python从Markdown文档中自动生成标题导航

    概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...

  5. net9:图片变成二进制流存入XML文档,从XML文档中读出图片以及从XML文档中读取并创建图片文件

    原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] fileToXml类: using System;using System.Data;using System.C ...

  6. C#解析Markdown文档,实现替换图片链接操作

    前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...

  7. 【Win 10应用开发】把文件嵌入到XML文档

    把文件内容嵌入(或存入)到XML文档中,相信很多朋友会想到把字节数组转化为Base64字符串,再作为XML文档的节点.不过,有人会说了,转化后的base64字符串中含有像“+”这样的符号,写入到XML ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

    有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...

  9. vscode使用Markdown文档编写

    首先安装vscode工具,具体的使用可以参考之前的博文:<Visual Studio Code教程:基础使用和自定义设置> VScode已经默认集成markdown文档编辑插件.可以新建一 ...

随机推荐

  1. 洛谷 P1908 逆序对(归并排序解法)

    树状数组解法:https://www.cnblogs.com/lipeiyi520/p/10846927.html 题目描述 猫猫TOM和小老鼠JERRY最近又较量上了,但是毕竟都是成年人,他们已经不 ...

  2. Linux对外提供服务 网络操作 端口操作 1.开启服务监听端口 2.设置防火墙,放行访问端口的包 iptables&netfilter 四表五链和通堵策略

    主题: Linux服务器上软件提供服务 1.网络操作 2.端口操作 1.网络操作 本机必须能够ping通目标主机(本地虚拟机或者远程主机) 2.端口操作 1.开启服务监听端口 2.设置防火墙,放行访问 ...

  3. 解决IE6 IE7绝对定位弹层被后面的元素遮住

    解决IE6 IE7绝对定位弹层被后面的元素遮住? 弹层边框一直被后面的元素边框遮住,试了n种方法,只有这个比较好用. <div class="tuijian-table"&g ...

  4. 长春理工大学第十四届程序设计竞赛(重现赛)L.Homework Stream

    链接:https://ac.nowcoder.com/acm/contest/912/L 题意: 作为大珩班尖子生,小r每天有很多作业要完成,例如工图.工图和工图. 很显然,做作业是要有顺序的.作业之 ...

  5. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  6. 关于Nginx对于PHP支持的问题

    因为使用的mediawiki是用php写的,所以就遇上了一个问题,怎么让Nginx支持php,记得当时使用apache2的时候是安装了一个叫 “ libapache2-mod-php5 ”的mod , ...

  7. Uncaught Error: Bootstrap's JavaScript requires jQuery

    在写bootstarp的时候,一直报 Uncaught Error: Bootstrap's JavaScript requires jQuery 查看了自己引入的文件路径是对的,也可以使用jquer ...

  8. SQL判断一个事件段 是否在数据库中与其他时间段有重叠 判断时间重叠

    数据库字段startDate 开始时间   endDate 结束时间  -两个参数 比如查2-2  至2-6 在数据库中是否与其他时间有重叠 四个条件有一项满足则有重叠时间 思路是这样子 以开始和结束 ...

  9. mui页面间传接值例子

    传值页面index.html <!DOCTYPE html><html><head> <meta charset="utf-8"> ...

  10. VMware虚拟机中red hat linux ping不通宿主物理主机原因

    在VMware Workstation中安装了red hat enterprise linux系统,网络使用“桥接”形式,最后出现在Windows下能够Ping通虚拟主机,而虚拟主机Ping不通Win ...