DotMD
下載 Mac 版

如何在 Markdown 加入圖片：驚嘆號、替代文字、路徑。

Markdown 的圖片只是簡短的一行。大小、對齊與說明文字不在語法之內，所以需要一點 HTML。這裡說明語法、路徑規則與變通辦法。

下載 Mac 版

需要 macOS 14 或以上版本。閱讀免費；編輯與審閱為一次付費。

快速解答

圖片就是前面多一個驚嘆號的連結：![alt text](path/to/image.png)。路徑可以是網址，也可以是相對於文件的檔案。要指定大小，請改用 HTML：<img src="image.png" width="400">。

![A cat on a keyboard](assets/cat.png)

<img src="assets/cat.png" alt="A cat on a keyboard" width="400">

·

語法

![Alt text](path/to/image.png "Optional title")
  • 方括號中的替代文字會向螢幕閱讀器描述圖片，圖片無法載入時也會顯示。請寫出圖片呈現的內容，不要只寫「image」。
  • 路徑放在圓括號中。如果路徑有空格，請寫成 %20，或用角括號把路徑包起來。
  • 標題是用引號括起的選用文字，通常在游標停留時顯示為提示。

參考式寫法也行，可以讓冗長的網址不佔據文字：

![Logo][logo]

[logo]: https://example.com/logo.png "DotMD logo"

相對路徑與檔案位置

沒有協定的路徑是相對於 Markdown 檔案，而不是相對於你開啟應用程式的位置。檔案的配置如下時

docs/
  spec.md
  assets/
    flow.png

spec.md 中的圖片是 ![Flow](assets/flow.png)。從上一層資料夾的檔案，要寫 docs/assets/flow.png；從下一層資料夾，則是 ../assets/flow.png。在 GitHub 上，以 / 開頭的路徑是相對於儲存庫根目錄。請把圖片放在文件旁邊的 assets 資料夾中，這樣搬動資料夾時，圖片也會一起移動。

Mac 不分大小寫，但 Linux 伺服器上的圖片檔名會區分大小寫，這是圖片在本機正常、上線後卻壞掉的常見原因。

如何設定圖片大小

Markdown 本身沒有大小的設定。請使用帶有寬度的 HTML img 標籤；高度會依比例調整：

<img src="assets/screen.png" alt="Settings window" width="400">

寬度與高度以像素為單位，width="50%" 這樣的百分比在多數應用程式中也行得通。GitHub 在 README 與留言中支援這個標籤。有些應用程式也接受把大小寫在替代文字內，例如 ![Screenshot|400](assets/screen.png)。這種寫法來自 Obsidian，DotMD 也能讀懂，但其他應用程式會把 |400 當成替代文字的一部分顯示，因此必須到處都能用的檔案，請使用 HTML 標籤。在表格儲存格中，直線必須寫成 \|。

對齊與說明文字

對齊與說明文字同樣要靠 HTML。要讓圖片置中，把它放進帶有 align 的段落：

<p align="center">
  <img src="assets/logo.png" alt="Logo" width="200">
</p>

要加說明文字，請使用 figure 搭配 figcaption：

<figure>
  <img src="assets/flow.png" alt="Request flow" width="500">
  <figcaption>Figure 1. The request flow.</figcaption>
</figure>

並非每個應用程式都會保留這些標籤；GitHub 保留大部分，DotMD 兩者都能顯示。如果需要到處都能用的說明文字，請改在圖片下方放一行斜體文字：*Figure 1. The request flow.*。

替代文字、檔案大小與格式

寫替代文字時，就像你在電話中向對方描述這張圖：Settings window with the Sync option turned on 比 screenshot 傳達的更多。純裝飾的圖片，括號內留空，螢幕閱讀器就會略過。

螢幕截圖與圖表用 PNG，照片用 JPEG，標誌和線稿用 SVG，並讓檔案保持小：6 MB 的截圖會拖慢 README 與儲存庫。多數應用程式也會像其他圖片一樣顯示動畫 GIF。

圖片沒有顯示的原因

  • 路徑錯誤。請從 Markdown 檔案所在的資料夾檢查路徑，並確認檔名的大小寫。
  • 漏了驚嘆號。沒有它，你得到的是連結，而不是圖片。
  • 路徑中有未跳脫的空格。
  • 線上頁面使用了本機檔案。指向你磁碟上檔案的路徑，只在你的磁碟上有效。
  • 遠端圖片被封鎖。有些應用程式在你允許之前，不會載入網路上的圖片。

想看圖片會是什麼樣子，請在能解析相對於文件的路徑的閱讀器中開啟檔案。DotMD 可以：圖片顯示的寬度不會超過文字欄，HTML 的寬度標籤會被採用，而貼到編輯器中的截圖，會儲存在檔案旁邊的 assets 資料夾。閱讀免費。

關於 Markdown 圖片的常見問題

如何在 Markdown 加入圖片？

寫成 ![alt text](path/to/image.png)。路徑是網址，或相對於 Markdown 檔案的檔案路徑。

如何變更 Markdown 圖片的大小？

Markdown 沒有大小的語法。請使用 HTML 標籤，例如 <img src="image.png" width="400">。

如何在 Markdown 中置中圖片或加上說明文字？

使用 HTML：用 <p align="center"> 包住圖片以置中，或用 <figure> 搭配 <figcaption> 加上說明文字。支援情況因應用程式而異。

為什麼我的 Markdown 圖片沒有顯示？

通常是相對路徑錯誤，或大小寫與檔名不符。請確認有驚嘆號，且路徑是相對於 Markdown 檔案。

更多問題

其他文章

程式碼區塊 Markdown 表格 可摺疊區段

指南

Markdown 速查表 閱讀 Markdown 編輯器