在 Obsidian 中为图片添加注释

Markdown 插入图片语法

在 obsidian 中我们可以用下面两种格式插入图片（! 代表让图片可见）

![图片信息](图片链接 "注释")
![[图片名字.png|大小 "注释"]]

还可以通过 HTML 标签来调整图片的大小和位置。

<img src="图片链接" alt="图片描述">

为图片添加注释

这里提供两种方法，第一种需要用到 HTML 的语法，在阅读模式和编辑模式都生效。第二种语法更简单，但是只在阅读模式生效，编辑模式不显示（插件与最新版 ob 不兼容。有很多人提了 ISSUE，作者提供了一个 0.0.15 alpha 版本，但是并没有成功解决这个问题，且正在努力更新该插件，在下一版本实现兼容）

方法一：利用 html 语法

<figure>
	<img src="这里是你的图片链接" height="500">
	<center><figcaption>这里写你的注释</figcaption></center>
</figure>

其中，<figure> 是指明此处是一个图片，第二行就是用 html 呈现的图片的语法格式，<figcaption> 是一个 HTML 标签，用于为 <figure> 元素（表示独立的、完整的内容块，如图像、图表、照片等）提供标题或说明文字，常与 <figure> 标签一起使用。如果你的图片居中，别忘了用 <center> 标签让你的注释居中。

```html
<figure>
	<img src="https://cdn.pkmer.cn/images/202306171440283.gif" height="300">
	<center><figcaption>图源自 PKMER</figcaption></center>
</figure>
```

把这段 html 复值到你的 md 文件中，就可以看到最开头的图片的效果了。（不用放在代码框中）

方法二：利用插件 Image Caption

概述

使用插件得到的结果和直接用 html 的结果是一样的，但是插件目前在最新版 ob 的编辑模式中并不显示（支持旧版），只在预览模式中显示。因此建议使用前一种方法。据作者所说，该插件的下一版会解决这个问题，届时自然这个插件更优，因为他的语法比起前者实在简单许多。

效果&特性

语法

```md
![[图片链接|注释内容|图片大小]]
![注释内容|图片大小](图片链接)
```

也就是说，他会把插入图片中的提示信息作为注释内容，直接添加到图片下方。

!["图片源自 PKMER"|650](https://pkmer.cn/img/illustrations/home.png)

设置

• Lable：给注释加上前缀；
• CSS：可以给注释添加 CSS，记得加上 text-align: center;，这样注释才会居中；
• Dlimeter：分隔符设置，用于确定你的注释，分隔符包含的部分就是显示的注释；
  • 例如我们在设置中填上 "，他就会把引号包括的内容视作注释 !["注释"..](link)，注释中就不会显示出引号。
  • 由于识别的逻辑是只识别第一个和最后一个字符，因此在注释中间如果有分隔符，无需转义；
• Caption as HTML：允许注释以 HTML 渲染；

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。