将图片内嵌入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. Node.js 第三方包的安装、升级、卸载,以及包依赖管理

    本地安装: npm install package-name 全局全装: npm install -g  package-name 举个栗子 全局安装 React项目的脚手架 npm install ...

  2. code blocks无法输出中文解决方法

    是CodeBlocks编译器设置问题,在CodeBlocks菜单 settings -> compiler and debugger settings -> global compiler ...

  3. 7-36 旅游规划 (25 分(Dijkstra)

    有了一张自驾旅游路线图,你会知道城市间的高速公路长度.以及该公路要收取的过路费.现在需要你写一个程序,帮助前来咨询的游客找一条出发地和目的地之间的最短路径.如果有若干条路径都是最短的,那么需要输出最便 ...

  4. missfresh问题记录

    一.基本信息 1.登陆机器    ssh lina02@mjump.missfresh.net -p2222 二.问题 1.分页问题:job_id为空时能查询出来(笛卡尔乘积),需要加上AND res ...

  5. CSS中垂直水平居中

    方法一:使用flex布局,父级元素设置justify-content和align-items <div class="cont"> <div class=&quo ...

  6. jsp使用中$的符号使用失效

    解决方法 添加一段话  <%@ page isELIgnored="false"%> 原因:因为jsp servlet版本问题,2.3及2.3之前的版本isELIgno ...

  7. There is much opportunity for anyone willing to dedicate himself to his labors.

    There is much opportunity for anyone willing to dedicate himself to his labors.付出努力的人才有机会出人头地.

  8. SQL Server 2012安装配置(Part3 )

    SQL Server 2012安装配置(Part1 ) SQL Server 2012安装配置(Part2 ) SQL Server 2012安装配置(Part3 ) 3 客户端安装 3.1 安装客户 ...

  9. LeetCode Remove Linked List Elements 删除链表元素

    题意:移除链表中元素值为val的全部元素. 思路:算法复杂度肯定是O(n),那么就在追求更少代码和更少额外操作.我做不出来. /** * Definition for singly-linked li ...

  10. code Gym 100500D T-shirts(暴力)

    因为只能买一次,暴力枚举一下买的衣服的大小. #include<cstdio> #include<map> #include<algorithm> using na ...