Back
Featured image of post 有关Markdown中的图片,你需要知道的一切

有关Markdown中的图片,你需要知道的一切

Obsidian使用场景下的Markdown图片设定与操作

我一直觉得「图片」是理解markdown格式的一个艰难之处,因为它的图片逻辑和我们平时接触的图片逻辑都不一样,我一开始也完全不理解,花了挺久才搞懂而且逐渐习惯。所以这篇文章基本是把我走过的弯路总结出来,以便大家对markdown中的图片直接理解和上手,避免产生困惑浪费时间。

所以如果你正在使用markdown,而且对它的图片设定抱有疑惑,比如:为什么我的图片是一个单独的page为什么不能直接长按保存图片为什么不能直接编辑图片我要怎么修改图片大小?这篇文章应该能一次性解决你的很多疑惑。

弱图文排版特质

首先,所有的图片在markdown格式中都是以链接(link)的形式嵌入(embed)文本中的,逻辑和网页链接、笔记链接没有区别。

所以,鱼与熊掌不可兼得。markdown格式的优点在于忽略排版专注内容、大小极小清爽方便;而弱点就是不擅长图文排版

在markdown里可以链接插入图片以实现最基本的图片显示功能,但是如果想实现像word或者微信公众号里一样的丰富图文排版……几乎不可能,除非打很多插件疯狂折腾,但我觉得应该把合适的使用场景留给合适的工具,没有必要魔改强求。如果你有很高的图文排版要求,markdown并不是适合你的文本格式。

关于markdown格式的进一步介绍:

为什么用Markdown,而不用Word? - 知乎

Markdown 入门基础 | Markdown 官方教程

MarkDown超级教程 by 成雙醬 - Obsidian中文教程

Markdown中的两种图片形式

首先介绍一个概念:

! (英文感叹号)在markdown中的意思是「渲染」, page、图片、pdf链接都可以通过前加 ! 直接渲染。

渲染的意思是「可以直接显示内容而不是标题」;如果去掉 !,则只会显示标题,鼠标悬停在上面才可以看见内容(即不渲染)。


其次,Markdown之中有两种储存图片的方式。

本地储存(internal embeds)

本地储存图片的格式与效果🌰

将图片以png、jpg、gif等图片格式直接存在你的本地硬盘(也就是你的 obsidian vault中)

格式为: ![[图片名称.格式后缀]]

当你直接把图片拖入或者粘贴到obsidian,obsidian会自动使用这个方式在本地创建一个图片page。可以修改该page的名字,但是不能修改后缀和格式,也不能往该界面内加任何其他内容(本质上就是 ob把图片存到了本地且读取后用page形式呈现了)。

然后ob也就像引用其他page一样引用这个图片page,并通过! 渲染方式以直接显示图片。

外链渲染(external embeds)

外链渲染图片的格式与效果🌰

像渲染外部网页链接一样直接渲染图片外链

格式也完全一致,即: ![图片名称 /可以为空](图片链接)

这样,图片不仅不会占用你的本地储存空间,而且如果你要把markdown里的图片上传到网络,可以直接使用该链接而无需任何额外更改和上传,任何网站都可以成功读取渲染这张图片。

取舍

这两者并无优劣之分,它们的优缺点是相反且互补的。

  • 本地储存

    • 非常安全、不怕丢失 ✅
    • 上传加载迅速 ✅
    • 随时随地查看图片✅
    • 占用本地储存空间 ❌
    • 污染文件命名 / 每次都要命名图片很麻烦 ❌
  • 外链

    • 不占用本地空间 ✅
    • 方便在互联网直接传播 ✅
    • 没网的时候看不到图❌
    • 链接失效图片就会丢失 ❌
    • 上传下载缓慢 还有可能失败 ❌

下面会介绍以外链为主两种方法的互补和转换

我该如何上传图片?

本地

  • 在pc端非常方便,直接复制图片粘贴、把图片拖入ob都行

  • 在移动端只能按按钮从相册导入,这也是本地图片不方便的一点

提醒

如果要常用本地文件,最好设置一下单独的「附件」文件夹

位置在 设置-文件与链接 ,最下方的两个选项设置成如图(我这里取名“附件”,文件夹名称可以自定义,但首先你得创建这个文件夹)

图床

本地图片是没有网络链接的,要把本地图片转成一个随处可以读取的链接,就要用到图床。

什么是图床?

图床就是给图片提供一个容身之处。

平时,你的图片栖息在你的硬盘中,如果你想把图片分享到网络上,就必须要找到一个平台托管你的图片、赋予你一个代表该图的网络链接,然后以这个链接为基础才可以把图片共享到全互联网。

其实你平时用的微博、朋友圈,都在帮你托管着图片,只是这仅仅是它们的一个附带功能,所以你并不会把它们看成是图床。而图床网站就是专门帮你托管图片、提供图片链接的网站。

关于主流图床的选择请自行搜索,我目前认为最好的方法是【GitHub自建图床+jsDelivr国内加速】,同样请靠关键字自行搜索,此处不细讲。

自动化图床

现在我们有了图床,问题是,如果每次使用图片都需要手动操作(复制图片、粘贴图片、打开网站、点击上传、复制链接、粘贴链接)也太麻烦了。

好在计算机工具的最大特点就是让人类可以通过脚本从重复劳动中解放出来。

请看神器:PicGo (Github下载地址帮助文档配置手册),PicGo正是如此一个集合各大图床的脚本工具,它可以帮你把图床操作简化到图片上传、获取链接两步。

Obsidian与图床联动

没错,两步还不是最简单的,还有更简单的一步操作,你甚至不用上传图片只要复制粘贴就行了!

请看神器:ob插件—— Image auto upload Plugin(Github下载地址;你也可以在官方插件社区中直接搜索名字下载)

Image auto upload Plugin
Image auto upload Plugin

只要你完成了PicGo的设置可以正常使用,直接下载这个插件就可以做到「直接粘贴/拖入图片→自动上传到图床→返回外链显示」,究极丝滑全自动化操作完全实现!:ablobcall:

图床转本地

如果你的图床跑路了,或者因为其他奇奇怪怪的原因你不想再用图床了,感觉还是自己的图片放在自己硬盘最舒心,你可以用插件把图床图片下载到本地

插件:Local Images(Github下载地址),可以实现单页或全库的图床图片下载且转换为本地。

Local Images
Local Images

我该如何导出图片?

上传到obsidian的图片在手机上无法直接长按保存,pc端也无法右键保存,这也是最开始困扰我的点。

解决方式是

  • 截图

    没错,如果你只是想快速分享,不追求保留原画质,截图仍是最方便快捷的方法

  • 因为本地图片本身就是一个图片附件,所以你可以直接找到并保存这个附件

    x 但我认为这个方法比较繁琐,不推荐使用

    • pc端:把图片附件当成一个界面打开→点击右上角三个点→在系统资源管理器中显示→在弹出来的系统文件夹中右键拷贝/保存此图
    • 移动端:把图片附件当成一个界面打开→点击右上角三个点→分享→在弹出来的系统分享界面里拷贝/保存此图
  • 下载下面的Image Toolkit插件!

    下面那排的最后一个键就是复制此图,无论是本地还是外链皆可一键复制,这是我平时最常用的方法

我可以改变图片大小吗?

❗️:这并不是markdown通用方法,而是obsidian特有的。

你可以在图片名称里输入|像素数字改变图片大小,单独输入的数字默认是「宽度的像素值」。

如,以下例子的意思为:保持宽高比,更改图片宽度为200像素。

  • ![[我是图片.jpg|200]]
  • ![|200](https://s2.loli.net/2022/03/03/DiCYbJh74qG9Oxo.png)

如果想更改高度或宽高比,则数字格式为:100x100(前宽度;后高度)

其他相关插件推荐

Image Toolkit

仓库地址:https://github.com/sissilab/obsidian-image-toolkit

markdown里的图片浏览体验非常简陋,只能放大查看。这个插件提供了一系列查看图片时可以按比例缩放、旋转、全屏、复制图片 等功能(注意:是「查看图片」,这代表图片视角暂时改变,不代表图片本身被编辑了)

效果
效果

Media Extended

上文提到了 ! 可以渲染page、图片、pdf链接,但是这也就是obsidian自带支持的唯三渲染了,没有想到吧!

好吧,反正这个插件可以拓展可渲染媒体,包括音频、视频等,而且额外提供提供倍速播放等功能。

效果:https://user-images.githubusercontent.com/31102694/118903678-dd82fe00-b94a-11eb-8ef3-7b5044a2bab8.mp4

comments powered by Disqus
Enter through the narrow gate.
For wide is the gate and broad is the way that leads to destruction,and many enter through it.
Built with Hugo
Theme Stack designed by Jimmy
© Licensed Under CC BY-NC-SA 4.0