本文写于 2017年02月20日,距今已超过 1 年,距 2022年10月18日 的最后一次修改也已超过 3 个月,部分内容可能已经过时,您可以按需阅读。如果图片无法显示或者下载链接失效,请给我反馈,谢谢!


0 0 投票数
评分

在 Markdown 中插入图片,语法标记很简单,用的标记和插入链接很像,只是前面多了一个感叹号。
![alt](src)
问题在于,插入图片向来有令人头疼的事——图片放哪里?

如果是本地,那么插入图片是这样写的,绝对路径相对路径都可以。
![alt](/pictures/img/test.png)
问题在于,这么做,本地路径还是一个逃不过的坎,如果本地路径有改动,或者我想要把文件分享给别人,除非导出成 PDF 等格式,否则单单一个 Markdown 文件,别人就没法看图片,而把图片和MD打包放在一起,本身也是很麻烦的事。

那么为何不放在网上呢?
![alt](https://test.jxtxzzw.com/pictures/img/test.png)
似乎也不好。

万一上传图片的那家网站关闭了呢?

并不是所有人都有能力自己搭建一个服务器的,而且,就算自己搭建了服务器,服务器坏了呢?或者说,很多年后空间不足,放不下了,迁移也是麻烦。又万一,看MD文件的那台电脑,没有联网怎么办?

幸运的是,今天看到了一个用 Base64 编码插入 Markdown 图片的方法。

首先,我们把一张图片转换成Base64编码。

比如一张图片转换成 Base64 编码,是

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

原来 src 的括号里,先写上

data:image/png;base64,

首先是 data,然后跟一个冒号,再跟 image,斜杠,斜杠后面写上png或者jpg或者其他的格式,然后是一个分号,分号后面是base64,然后是一个逗号,逗号后面是这段 Base64 编码。

整个语句,从 data 到 base64 编码的最后一个字符,放在那个括号里。

不过,这么长的编码写在文件中,拦腰截断整个文件内容,很难看。

即便使用的 Markdown 编辑器是实时预览的,阅读时没有影响,不过写的时候,还是影响体验的。

这时,又可以考虑到一种 Markdown 的高级用法,ID 调用。

我们可以这么做。

定义一个 ID,叫做[img1],放在末尾,然后调用这个ID。

写上

![alt][img1]

然后,在文本最下方,定义这个ID。

ID的定义和调用,这里不多讲了。

如果有多个ID,也全部放在文末,这样就不会使文章被分裂地七零八落了。

就像写注释和参考文献一样,这些与文章内容相比不是那么重要,只想看图片而并不想去关心图片的 Base64“编码”,统统扔在最后。

现在只剩下一个问题,怎么获得图片的 Base64 编码?

这个方法就太多了——可以去在线网站转换,也可以找一个本地软件。

如果想要通用型强一点,联网离线都能用、换台电脑没有软件也不用再去下载,那么可以试试浏览器(比如Chrome)的Console——浏览器总有吧,打开浏览器,浏览本地图片,进Console,打开Source,复制图的Base64。

要是没有Chrome,其他的浏览器总有吧,找到浏览器的Console就行了。

要是所有的浏览器都没有Console,或者浏览器的Console不支持转换成 Base64 编码,同时这个电脑上又没有相应软件,且不能联网——应该不存在这样的电脑吧?如果有,别用了。

0 0 投票数
评分
1条留言
订阅评论
提醒
guest

在点击发表评论按钮时,网络请求的数据包含浏览器版本、操作系统版本和 IP 地址;您的网络服务提供商、雇主或学校、政府机构可能会看到您的访问活动;根据浏览器默认行为、操作系统设置和安全防护软件的设置不同,您的浏览器可能会也可能不会在本地 Cookies 缓存您输入的用户名、邮箱以便下次评论使用。

请对自己的言行负责。

您想以什么身份发表评论
邮箱将在您的评论被回复时给您通知
(可选)如果您也有个人网站,不妨分享一下
我对这篇文章的评分
这篇文章给您带来多大帮助
1 评论
内联反馈
查看所有评论
leto
leto (@guest_221) Chrome 71.0.3578.98 Windows 10
游客
2019年1月2日 03:29

学习了