[**English version**](https://hackmd.io/@docs/insert-image-in-team-note)

{%hackmd BJOT7rhoyl %}

# 讓你的筆記更豐富 圖片上傳
您可以在筆記中輕鬆插入圖片
HackMD 會自動幫你上傳到圖片資料庫中，並生成一個連結、在筆記中顯示

:::success
支援的圖片格式： `png`, `jpg`, `gif`, `bmp`, `tif`
:lock: 免費版使用者每次可以上傳 1 MB 大小的圖片
:sparkles: Prime 使用者可以解放限制到 **20 MB** 的圖片。
:::

:::warning
:exclamation: 當您將一篇筆記刪除，上傳到該筆記的圖片也會跟著被刪除哦！

舉例來說：您上傳圖片 A 到「甲筆記」並將圖片 A 的連結貼上到「乙筆記、丙筆記」
當您將「甲筆記」整個刪除，在「乙筆記、丙筆記」的圖片連結就會失效，並且在瀏覽時圖片會顯示讀取失敗
:::

 

# 如何上傳圖片
## 一、拖曳到指定行

使用滑鼠拖曳圖檔到指定的一行


## 二、透過工具列上傳 <i class="fa fa-picture-o ui-editor-toolbar-image"></i>

點擊工具列的 <i class="fa fa-picture-o ui-editor-toolbar-image"></i> **圖標** 即可從檔案中選擇要上傳的圖片


## 三、複製貼上

還有更簡單暴力的方式，直接 <kbd>Ctrl</kbd>＋<kbd>Ｖ</kbd> 或 <kbd>⌘ Cmd</kbd>＋<kbd>Ｖ</kbd> ，HackMD 會幫你插入圖片

&nbsp;

# 如何調整圖片尺寸

## 指定比例

在上傳圖片後的連結後方插入` =50%x`，即可依照比例調整圖片尺寸，最大不會超過筆記的顯示寬度。當然你可以隨意調整百分比，設定 20%、45%、75%。

![](圖片連結 =50%x)

舉例：
![](https://hackmd.io/favicon.png =50%x)

>[!Tip]在等號 `=` 之前要加一個空白哦！

上方灰色區塊的語法呈現結果：

## 指定寬度

在上傳圖片後的連結後方插入` =200x`，即可指定圖片寬度，尺寸一樣能隨意調整，像是 10x、350x、600x，最大不會超過筆記的顯示寬度。

![](圖片連結 =200x)

舉例：
![](https://hackmd.io/favicon.png =200x)

>[!Tip]在等號 `=` 之前要加一個空白哦！

上方灰色區塊的語法呈現結果：

## 圖片位置
### 置中

請直接複製下方的語法，並將 `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" />

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

&nbsp;

### 靠右對齊

請直接複製下方的語法，並將 `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" />

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

# 互動圖片和圖表

歡迎使用我們最新的圖片和 UML 工具列！以下是一些新增功能的介紹，讓您更輕鬆地與圖片和圖表進行互動。

### 1. 圖片放大功能

從 2025 年 5 月開始，我們新增了圖片放大功能。您可以透過以下兩種方式來放大圖片或 UML 圖表：

- **單擊放大**：只需簡單地單擊圖片或 UML 圖表，即可放大查看細節。
- **游標 Hover 放大**：將游標移動到圖片範圍內，使用圖片上方的工具列進行放大。


### 2. UML 互動圖表

部分由 UML 語言生成的圖表支援互動。目前，我們辨識出的支持互動的圖表包括 Markmap 和 Vega-Lit。如果您想要與 UML 圖表進行互動，請按著 `Option/Alt` 鍵再點擊圖表，這樣就不會觸發圖片放大功能。

希望這些新功能能夠提升您的使用體驗！

# FAQ

### 我的筆記分享/匯出後有些圖片無法讀取，可以怎麼解決？

圖片的閱讀權限和你上傳圖片的原始筆記權限一致（當圖片網址為`https://hackmd.io/`）

如果想在多個筆記使用同一張圖片，記得將原始筆記調整為**所有人**可閱讀哦！
:::info
**情境**
我在Ａ筆記上傳（圖一），Ａ筆記設定只有 **擁有者** 可閱讀
則當我將（圖一）超連結插入Ｂ筆記，並且分享給其他人，圖片將顯示無法存取。
:::