在团队笔记中插入图片

中文版

返回 HackMD 教程主页

中文教學 首頁

给我们反馈或报告 Bug

在笔记中插入图片

你可以使用 HackMD 轻松地在 Markdown 中插入图片。HackMD 将上传图片(到 HackMD 的私有云空间)，生成图片的 URL，并在笔记中呈现它。

图片的权限从属于笔记的权限。因此，如果只有你可以阅读笔记，那么只有你可以看到图片，即使有人碰巧有图片的链接。

支持的图片格式：png、jpg、gif、bmp、tif

免费用户可以上传最大 1 MB 的图片。

Prime 用户可以上传 20 MB。

如果你删除上传图片的笔记，与这些图片的关系也将被移除。

例如，你将图片 A 上传到笔记 X，并将其链接粘贴到笔记 Y 和 Z。之后，你删除了 X，那么在查看 Y 和 Z 时你将看不到 A。

媒体库正在我们的路线图上，以便笔记中的图像和其他资产可以与笔记本身分开处理。

插入图片的三种方式

1. 拖放

拖放你的图片文件，生成的图片 URL 将出现在光标所在的位置。

图片未显示可能的原因

• 图片上传到了你没有权限访问的笔记
• 最初上传图片的笔记已被删除

了解更多 →

▲ 拖放图片以上传

2. 从工具栏上传

点击工具栏中的 图标，然后选择要上传的文件。

▲ 从文件中选择图片

3. 从剪贴板粘贴

HackMD 支持复制粘贴图片。使用 ( Ctrl + V 或 ⌘ Cmd + V) 在光标处插入图片。

如何更改图片大小？

指定比例

要按比例调整图片大小，你可以在上传图片的链接后插入 =50%x。这样，图片大小将根据指定的百分比进行调整，而不会超过笔记本的显示宽度。

当然，你可以自由地将百分比调整为 20%、45%、75% 或你喜欢的任何其他值。

![](image link =30%x)
 or
![](image link =300x)

For example：
![Docs](https://hackmd.io/_uploads/Bk1YRXXP1g.jpg =30%x)

你必须在 = 前面添加一个空格！

这是它：

指定宽度

在链接后插入 =300x 以指定图片宽度。大小可以自由调整，例如 10x、350x 或 600x，但最大宽度不会超过笔记的显示宽度。

![](image link =300x)

舉例：
![Docs](https://hackmd.io/_uploads/Bk1YRXXP1g.jpg =300x)

你必须在 = 前面添加一个空格！

这是它：

设置图片位置

居中

复制下面的语法，并将你的图片链接粘贴到 src="https://hackmd.io/favicon.png" 中。

• width:10%： 设置图片大小

<img style="display:block;margin:20px auto;padding:1px;border:1px #eee;width:10%;" src="https://hackmd.io/favicon.png" />

右对齐

复制下面的语法，并将你的图片链接粘贴到 src="https://hackmd.io/favicon.png" 中。

• width:10%： 设置图片大小
• margin:20px right： 设置图片边距并右对齐

<img style="display:block;margin:20px right;padding:1px;border:1px #eee;width:10%;" src="https://hackmd.io/favicon.png" />

交互式图片和图表

欢迎使用新的图片和 UML 工具栏！ 这是对一些新添加功能的介绍，这些功能使你可以更轻松地与图像和图形进行交互。

1. 图片缩放功能

从 2025 年 5 月开始，我们添加了图片缩放功能。 你可以使用以下方法放大图片或 UML 图：

• 点击缩放： 只需点击图片或 UML 图即可放大并查看详细信息。
• 悬停缩放： 将光标移动到图片区域上方，然后使用图片上方的工具栏进行放大。

2. 交互式 UML 图

某些由 UML 语言生成的 UML 图支持交互。 目前，我们已将 Markmap 和 Vega-Lit 标识为交互式图。 如果要与 UML 图进行交互，请在点击图时按住 Option/Alt 键。 这将防止触发图片缩放功能。

• 原文链接： hackmd.io/@docs/insert-i...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～