圖片語法是 。它就是前面多一個驚嘆號的連結。所以寫 ，圖片就會以原始尺寸出現在這一行的位置，不必上傳，也不必寫 HTML。
中括號裡的替代文字（alt text）供螢幕閱讀器朗讀，也讓搜尋引擎理解圖片內容。圖片載入失敗時，它還會原地頂替，所以請認真寫，不要留空。
其他細節每個平台都不一樣：尺寸控制、圖片放哪裡、能不能直接拖檔案進去。下面各節逐一說明，而我們的編輯器會邊打邊把結果渲染出來。
重點速覽
| 語法 |  |
|---|---|
| 替代文字 | 語法上可省略，實務上一定要寫 |
| 尺寸控制 | 核心語法沒有，需改用 HTML img 標籤 |
| 本機或圖床 | 相對路徑跟著儲存庫走，https 則到哪都能顯示 |
| 拖放上傳 | GitHub、GitLab、Notion、Obsidian 都支援 |
語法逐一拆解
- 寫
，驚嘆號就是把連結變成圖片的關鍵。 - 替代文字語法上可省略、實務上必寫，因為圖片失敗時由它頂替。
- 相對路徑跟著 Git 儲存庫走，https 網址則在任何地方打開都看得到。
- Markdown 沒有寬度設定，要縮放就得用 HTML img 標籤，或乾脆換一張小圖。
三個部分，依序如下。
三個部分各自的職責
- 驚嘆號的意思是「嵌入這個」，而不是「連到這個」。漏掉它就會得到一個文字連結，這也是整個語法最常見的手誤。
- 中括號放替代文字。
- 小括號放網址，後面還能加一段引號包住的標題，部分瀏覽器會在滑鼠懸停時顯示。
上面兩行都會變成 <img> 標籤。第一行成為 <img src="images/bike.jpg" alt="倚著紅磚牆的紅色腳踏車">。過程中沒有任何東西被複製或嵌入，因為 Markdown 裡永遠只有一個參照。這就是破圖幾乎都代表網址壞掉的原因。
四個步驟插入一張圖
- 先把圖檔放到它要長住的地方，可以是文件旁邊，也可以是你自己掌控的主機。
- 複製它的網址。在 GitHub 上請開啟檔案後取
raw連結，不要用blob的那個。 - 在同一行依序打上
。 - 確認結果。把檔案丟進 Markdown 檢視器就能直接看到渲染後的樣子，原檔不會被更動。
有兩個寫法值得從 README 學起來。想讓圖片可以點擊，就把它包進連結：[](目標網址)。想把長長的 CDN 網址趕出正文，就用參考式寫法：內文寫 ![圖表][chart]，檔案最後補一行 [chart]: https://cdn.example.com/chart.png，和參考式連結的原理完全一樣。
怎麼寫出有價值的替代文字
好的替代文字會用一句話描述圖片內容。「匯出選單的截圖，.html 按鈕被特別標示」勝過只寫「截圖」，而兩者都勝過一組空的中括號。螢幕閱讀器會朗讀它，搜尋引擎會索引它，網路慢的讀者最先看到的也是它。
三個值得養成的習慣
- 描述內容，不是描述檔案。「季營收由兩百萬成長到五百萬」有資訊量，「chart.png」什麼都沒說。
- 不要寫「一張圖片顯示…」。輔助軟體本來就會先報出這是圖片。
- 純裝飾的圖就把中括號留空。分隔線或留白圖不需要描述，安靜比噪音好。
當資訊只出現在圖上
有時圖片帶有周圍文字沒有的內容，例如架構圖、統計圖，或一張表格的截圖。請把重點寫進替代文字，或在附近的段落再講一次。圖片是 Markdown 文件裡唯一無法用純文字讀取的部分，只畫在圖上的資訊，對一部分讀者等於不存在。
相對路徑、絕對網址，以及圖片放哪裡
以 https 開頭的絕對網址，在任何地方打開文件都能顯示。缺點是對方主機把檔案移除的那天就會破圖。images/diagram.png 這種相對路徑，則是以 Markdown 檔本身的位置為基準去解析。
 相對路徑：適合儲存庫
 絕對網址：到哪都能顯示
相對路徑最適合放在 Git 儲存庫裡。圖片跟著文件一起走，每個分支的審閱者都看得到。但把同一份 Markdown 貼到沒有那個資料夾的地方，就什麼都不會出現。
圖片放哪裡，本質上是「誰掌控這個檔案」的問題。專案內的文件，就把圖片和文件一起提交，版本才會一致。部落格或要分享的筆記，請用自己網站的媒體空間或專門的圖床。盜連別人網站的圖，是一場慢動作的意外。
注意：網址裡有空白會讓解析器當場停住，請編碼成 %20。另外在 GitHub 上，從檔案頁複製到的是 blob 網址，那回傳的是網頁而不是圖片。
要縮放圖片就得用 HTML
Markdown 沒有寬度或高度選項。圖片一律以原始像素尺寸顯示，所以沒處理過的手機截圖常常佔滿整個畫面。這裡沒有冒號小技巧，也沒有取巧的辦法。要控制尺寸，就得降到 HTML 標籤。
<img src="images/screenshot.png" alt="設定頁面" width="420">
只設定 width，高度會跟著等比例縮放。GitHub 也接受百分比。幾乎所有渲染器都認這個標籤，本站的預覽窗格也一樣。
用 HTML 要付出的代價
- 少數嚴格的渲染器會忽略內嵌 HTML，會做消毒的內容系統甚至會整段剝掉。
<img>標籤內部完全不會再經過 Markdown 處理，所以請讓標籤獨立成一行。- 文件不再是純粹可攜的純文字，而這正是選 Markdown 而不選 HTML 的一半理由。
更好的解法通常是換一張小圖
在放進文件前就把圖檔縮小。寬 400 像素的 PNG 載入更快、列印更乾淨，也完全不需要 HTML。圖片語法參考對格式、資料夾與存放習慣講得更深入。
各平台的圖片支援情況
語法是共通的，周邊行為不是。常見去處的實際情況如下。
| 平台 |  語法 | 拖放上傳 | HTML 寬度控制 |
|---|---|---|---|
| GitHub | 支援 | 支援，議題與編輯器皆可 | 支援 |
| GitLab | 支援 | 支援 | 支援 |
| 不支援 | 支援，以圖片貼文形式 | 不支援 | |
| Discord | 不支援 | 支援，以附件形式 | 不支援 |
| Notion | 貼上時轉換 | 支援 | 改用拖曳邊角縮放 |
| Obsidian | 支援，另有雙括號嵌入 | 支援，直接拖進儲存庫 | 支援 |
| VS Code 預覽 | 支援 | 支援，需搭配輔助鍵 | 支援 |
表格背後的規律
開發者平台給你完整語法，聊天軟體則用上傳取代語法。在 Discord 和 Reddit 上，單獨一行的圖片網址會自動嵌入，效果等同於圖片語法。Obsidian 則在標準寫法之外多了雙括號嵌入，細節見 Obsidian 指南。
造成破圖的四個小失誤
破圖幾乎都出自以下四個小失誤之一。
錯誤 正確
[標誌](logo.png) 
![標誌] (logo.png) 
 
 
逐行看這四種錯誤
- 第一行漏了驚嘆號，結果變成一個純文字連結。
- 第二行在
]和(之間多了空白，解析器不會替你接起來。 - 第三行的檔名裡有沒編碼的空白。
- 第四行指向某一台電腦上的路徑，所以全世界只有一個人看得到。
語法沒錯卻還是看不到圖
把網址單獨貼進瀏覽器分頁測試。404、需要登入、對方擋盜連，在文件裡都只會呈現同一種結果：一個安靜的空白框。把檔案貼進編輯器，幾秒內就能分辨是語法問題還是主機問題。
再往下就交給參考頁面。完整 Markdown 指南把圖片和連結放在一起講解，語法速查表讓你一眼查到寫法，轉換成 HTML 則說明匯出後圖片路徑會變成什麼樣子。
相關問題
立即使用編輯器
開啟編輯器