English version

點我

回到 HackMD 教學首頁

點我

給予建議 或回報BUG

讓你的筆記更豐富 圖片上傳

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

支援的圖片格式： png, jpg, gif, bmp, tif

免費版使用者每次可以上傳 1 MB 大小的圖片
Prime 使用者可以解放限制到 20 MB 的圖片。

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

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

 

如何上傳圖片

一、拖曳到指定行

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

二、透過工具列上傳

點擊工具列的 圖標 即可從檔案中選擇要上傳的圖片

三、複製貼上

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

 

如何調整圖片尺寸

指定比例

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

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

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

在等號 = 之前要加一個空白哦！

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

指定寬度

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

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

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

在等號 = 之前要加一個空白哦！

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

圖片位置

置中

請直接複製下方的語法，並將 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 圖表，即可放大查看細節。
• 游標 Hover 放大：將游標移動到圖片範圍內，使用圖片上方的工具列進行放大。

2. UML 互動圖表

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

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

FAQ

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

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

如果想在多個筆記使用同一張圖片，記得將原始筆記調整為所有人可閱讀哦！

情境
我在Ａ筆記上傳（圖一），Ａ筆記設定只有 擁有者 可閱讀
則當我將（圖一）超連結插入Ｂ筆記，並且分享給其他人，圖片將顯示無法存取。