如何上傳圖片
- docs__
- 发布于 2025-05-08 17:57
- 阅读 91
该文章介绍了如何在HackMD中插入和管理图片。包括上传图片的三种方式（拖拽、工具栏、复制粘贴），如何调整图片尺寸（指定比例、指定宽度），以及如何调整图片位置（居中、靠右对齐）。此外，还介绍了互动图片和图表的新功能，如图片放大功能和UML互动图表。最后，解答了笔记分享/导出后图片无法读取的问题，强调了图片的阅读权限与上传图片的原始笔记权限一致。
點我 回到 HackMD 教學首頁
點我 給予建議或回報BUG讓你的筆記更豐富 圖片上傳
您可以在筆記中輕鬆插入圖片
HackMD 會自動幫你上傳到圖片資料庫中，並生成一個連結、在筆記中顯示
支援的圖片格式： png, jpg, gif, bmp, tif
免費版使用者每次可以上傳 1 MB 大小的圖片
Prime 使用者可以解放限制到 20 MB 的圖片。
當您將一篇筆記刪除，上傳到該筆記的圖片也會跟著被刪除哦！
舉例來說：您上傳圖片 A 到「甲筆記」並將圖片 A 的連結貼上到「乙筆記、丙筆記」
當您將「甲筆記」整個刪除，在「乙筆記、丙筆記」的圖片連結就會失效，並且在瀏覽時圖片會顯示讀取失敗
如何上傳圖片
一、拖曳到指定行
使用滑鼠拖曳圖檔到指定的一行
Image Not ShowingPossible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
二、透過工具列上傳
點擊工具列的 圖標 即可從檔案中選擇要上傳的圖片
三、複製貼上
還有更簡單暴力的方式，直接 Ctrl ＋ Ｖ 或 ⌘ Cmd ＋ Ｖ ，HackMD 會幫你插入圖片
如何調整圖片尺寸
指定比例
在上傳圖片後的連結後方插入 =50%x，即可依照比例調整圖片尺寸，最大不會超過筆記的顯示寬度。當然你可以隨意調整百分比，設定 20%、45%、75%。
舉例：
在等號 = 之前要加一個空白哦！
上方灰色區塊的語法呈現結果：
指定寬度
在上傳圖片後的連結後方插入 =200x，即可指定圖片寬度，尺寸一樣能隨意調整，像是 10x、350x、600x，最大不會超過筆記的顯示寬度。
舉例：
在等號 = 之前要加一個空白哦！
上方灰色區塊的語法呈現結果：
圖片位置
置中
請直接複製下方的語法，並將 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/）
如果想在多個筆記使用同一張圖片，記得將原始筆記調整為 所有人 可閱讀哦！
情境
我在Ａ筆記上傳（圖一），Ａ筆記設定只有 擁有者 可閱讀
則當我將（圖一）超連結插入Ｂ筆記，並且分享給其他人，圖片將顯示無法存取。
- 本文转载自： hackmd.io/@docs/how_to_u... , 如有侵权请联系管理员删除。
