Markdown 圖片託管完全指南:我如何解決圖片失效的痛苦

更新 發佈閱讀 15 分鐘

凌晨兩點,我盯著螢幕,整個人都崩潰了。

花了整整六個小時寫出來的技術教學文章,精心截圖、仔細排版,一切都很完美。我按下發布鍵,重新整理頁面——

所有圖片都變成灰色的破圖框。

留言開始湧入:「圖片都看不到?」「這篇寫完了嗎?」還有人直接留「笑死」兩個字。

那一刻我發誓:我再也不要經歷這種鳥事了。

如果你也用 Markdown 寫作、寫技術文件、經營部落格,那你絕對懂我在說什麼。圖片在本機看起來很美,但一上傳就爆炸,或者要在每個平台重新上傳一次,改連結改到天荒地老。

接下來這篇文章,我會分享這三年來測試十幾個圖床服務、踩過無數雷、最後建立起來的一套真正可行的系統。


問題的核心:本地圖片為什麼不夠用?

剛開始寫 Markdown 的時候,我很天真地把所有圖片放在文章旁邊的 /images 資料夾。

/我的文章/
- [文章.md](<http://文章.md>)
- /images/
- 截圖1.png
- 截圖2.png

感覺超整齊對吧?所有東西都在一起,檔案結構清楚明瞭。

然後我試著把文章發到 Medium、方格子、自己的部落格——

全部炸裂。

本地圖片的三大死穴

死穴一:路徑只在你的電腦上有效

當你寫 ![截圖](./images/截圖.png) 的時候,這個路徑指向的是你電腦的檔案系統。Medium 看不到、WordPress 看不到、你的讀者更看不到。

死穴二:跨平台發布就是災難

去年我寫了一篇 50 張圖的開發工具教學。發到自己部落格後,想轉貼到 iT 邦幫忙。

你知道我花了多久重新上傳 50 張圖嗎?

整整三小時。

三小時的生命就這樣浪費在複製貼上上面。

死穴三:雲端同步會出問題

如果你用 Obsidian、Notion 或任何雲端筆記軟體,本地圖片的預覽常常會失敗,尤其在手機上。

轉捩點

那次三小時的慘痛經驗後,我在推特上抱怨。一個朋友留言:「你不會沒在用圖床吧?」

我當下的反應是:什麼是圖床?

於是我開始研究,然後我的寫作流程從此改變。


圖床是什麼?為什麼你需要它?

簡單來說,圖床(Image Hosting)就是一個幫你存放圖片的雲端服務,給你一個永久連結,讓你可以在任何地方使用。

從這樣:

![截圖](./images/截圖.png)

變成這樣:

![截圖](<https://cdn.example.com/abc123.png>)

這個網址在任何地方都能用:方格子、Medium、PTT、Dcard、GitHub、你的個人部落格、Slack、Discord、Notion⋯⋯

使用圖床的五大好處

Markdown 檔案超輕量 — 文章裡只有文字和連結,不會肥大

一次上傳,到處使用 — 同一張圖在十個平台都能用

跨平台發布秒完成 — 不用重新上傳,直接貼 Markdown 就好

雲端筆記完美同步 — Notion、Obsidian 都能正常預覽

分享文章超方便 — 傳給別人的 .md 檔,圖片自動可見

這是從「發一篇文要三小時」變成「發一篇文只要三分鐘」的關鍵差異。


我實測過的圖床服務(包含台灣適用評估)

這三年來,我測試了一大堆圖床服務。有些很棒,有些用到一半就倒閉,圖片全部消失。

以下是我現在真實在用的服務,以及針對台灣使用者的建議。

免費方案:適合輕度使用

1. Imgur — 台灣最多人用的選擇

如果你常逛 PTT、Dcard,你一定看過 Imgur 連結。

  • 優點:免費、不限流量、台灣連線速度快、社群龐大
  • 缺點:單檔限制 20MB、圖片可能被檢舉下架
  • 適合:論壇分享、臨時圖片、短期專案

我在 PTT 發文、Dcard 回覆、Slack 貼圖都用 Imgur。快速、方便、大家都看得到。

2. ImgBB — 無痛上手的備案

  • 優點:不用註冊、無限上傳、介面簡單
  • 缺點:單檔限制 32MB、服務穩定性未知
  • 適合:測試用、一次性分享

3. SM.MS — 大陸開發者常用

  • 優點:API 友善、存活超過 9 年
  • 缺點:免費方案只有 5GB、台灣連線速度普通
  • 適合:程式化上傳、簡單專案

血淚經驗:我曾經只用免費圖床,結果三年內遇到兩個服務倒閉。有一次是 300 張圖片一夜之間全部消失,我花了整個週末重新截圖、下載、上傳。從此以後,重要內容我一定用付費服務。

付費方案:認真寫作就該投資

1. Cloudflare R2 — 我現在的主力

這是我部落格文章、技術文件、長期內容的託管地。

  • 費用:10GB 免費,超過每 GB 約 NT$0.45/月
  • 優點:零流量費(無限下載)、全球 CDN、穩定可靠
  • 缺點:需要設定,初次使用有門檻
  • 我的成本:50GB 用量,每月約 NT$150

為什麼值得? 因為我的文章是資產,不是消耗品。每篇文章可能帶來長達數年的流量和收入,每月 150 元的穩定性投資完全划算。

2. AWS S3 + CloudFront — 企業級選擇

  • 費用:用多少付多少,一般部落格約 NT$150-300/月
  • 優點:99.999999999% 可靠性、規模化能力強
  • 缺點:設定複雜、帳單計算細項多

3. 台灣本地選擇:中華電信 HiCloud

如果你偏好台灣的服務,中華電信的 HiCloud 可以考慮:

  • 優點:本地服務、客服是中文、台灣連線快
  • 缺點:容量較小、價格偏高
  • 適合:企業用戶、需要本地支援的團隊

GitHub + jsDelivr:工程師的聰明選擇

這是很多台灣開發者在用的免費方案。

做法:把圖片放在 GitHub repo,透過 jsDelivr CDN 加速存取。

  • 優點:完全免費、版本控制、全球 CDN
  • 缺點:技術門檻較高、大量使用違反 GitHub ToS
  • 適合:開源專案、技術文件、個人筆記

上傳工具:讓整個流程變得無痛

選好圖床服務只是第一步。如果每次都要開瀏覽器、手動上傳、複製連結,你很快就會放棄。

真正的關鍵是:無腦快速的上傳工具。

macOS:uPic

這是我在 Mac 上的主力工具,改變了我的人生。

我的工作流程:

  1. 截圖(Cmd + Shift + 4
  2. 按快捷鍵(Cmd + Option + U
  3. 圖片自動上傳
  4. Markdown 連結自動複製到剪貼簿
  5. 直接貼到編輯器裡

從截圖到貼上連結,只需要三秒鐘。

下載:GitHub - uPic

Windows / Linux:PicGo

PicGo 是跨平台的開源專案,台灣很多工程師都在用。

優點:

  • 支援 Windows、macOS、Linux
  • 外掛系統豐富
  • 支援幾乎所有主流圖床
  • 介面中文化

台灣使用者特別推薦: PicGo 有專門的 Imgur 外掛,上傳速度很快。

下載:GitHub - PicGo

編輯器整合:Typora 的神級功能

Typora 是我最愛的 Markdown 編輯器(很多台灣寫作者也愛用)。

設定方式:

  1. 偏好設定 → 圖片
  2. 選擇「插入圖片時 → 上傳圖片」
  3. 選擇上傳服務(uPic 或 PicGo)
  4. 完成

從此以後,你每次貼圖,Typora 都會自動:

  • 上傳到圖床
  • 把本地路徑換成網址
  • 完全無感,全自動

你完全不用思考,就像魔法一樣。


我犯過最慘的錯誤(你千萬別重蹈覆轍)

兩年前,我發現一個免費圖床服務。無限空間、上傳快速、介面漂亮。

我超開心,把所有東西都傳上去。超過 300 張圖片,橫跨數十篇文章。

而且為了「節省硬碟空間」,我把本地備份都刪了。

你猜後來發生什麼事?

六個月後,那個服務無預警倒閉。沒有公告,沒有通知,直接消失。

我所有的部落格文章,一瞬間全部變成破圖。而我沒有備份。

我花了整個週末:

  • 回憶截圖內容重新截圖
  • 重新下載已經找不到的素材圖
  • 寄信給網友問「你有存我文章的圖片嗎」

那是我這輩子最崩潰的週末。

從此我建立的鐵則

永遠保留本地備份。

我不管圖床多可靠,不管是 AWS 還是 Google Cloud,我都會保留原始檔案。

我的資料夾結構:

/部落格素材/
/2025/
/10月/
/圖床教學文/
- 截圖1.png
- 截圖2.png
- 示意圖.png

硬碟很便宜,你的時間很貴。

如果圖床服務倒了,我可以在一個下午內重新上傳所有圖片,而不是花一個禮拜重建內容。


我現在使用的完整系統

經過三年的實戰和調整,這是我目前的圖片託管策略:

分級託管策略

臨時內容(論壇討論、即時分享、測試用圖)

  • 服務:Imgur
  • 原因:快速、免費、台灣連線穩定
  • 心態:就算連結壞掉也無所謂

重要內容(部落格文章、技術文件、教學內容)

  • 服務:Cloudflare R2
  • 原因:穩定、可靠、值得付費
  • 心態:這些內容是資產,要長期維護

開源專案(GitHub 文件、開源教學)

  • 服務:GitHub + jsDelivr
  • 原因:免費、版本控制、原生整合
  • 心態:公開內容,社群可以協助維護

備份與復原機制

每月例行檢查:

  1. 掃描所有已發布文章
  2. 檢查圖片連結是否正常
  3. 驗證本地備份完整性
  4. 更新備份索引

緊急復原腳本:

我寫了一個簡單的 Python 腳本,可以:

  • 讀取所有 Markdown 檔案
  • 找出所有圖片網址
  • 批次下載(以防萬一)
  • 批次上傳到新圖床
  • 自動替換 Markdown 中的連結

這個腳本我已經用過兩次,每次都救了我的命。


台灣使用者的特別建議

根據台灣的網路環境和使用習慣,這裡有一些額外的建議:

PTT / Dcard 發文

如果你常在 PTT 或 Dcard 發文:

  • 首選:Imgur(最多人用,載入快)
  • 備選:ImgBB(有些板規限制 Imgur)
  • 注意:檔案大小要壓縮,行動版使用者流量有限

方格子 / Medium 發文

  • 方格子:建議直接使用平台內建上傳,因為平台會自動優化
  • Medium:可以用圖床,但平台上傳的圖片會有更好的 SEO
  • 跨平台發布:圖床的優勢才會顯現

企業部落格 / 技術團隊

如果是公司或團隊使用:

  • 不建議:免費圖床(品牌形象風險)
  • 建議:自架圖床或付費服務
  • 考慮:台灣本地服務商(客服、發票、合約都方便)

實戰教學:30 分鐘建立你的圖床系統

如果你現在就想開始,這是我建議的步驟:

第一階段:輕度使用者(10 分鐘)

適合對象:偶爾寫文章、分享筆記、論壇發文

  1. 註冊 Imgur(或直接用不登入的 ImgBB
  2. 下載 PicGo(Windows)或 uPic(Mac)
  3. 設定好圖床連接
  4. 測試截圖上傳
  5. 完成!

第二階段:認真寫作者(30 分鐘)

適合對象:經營部落格、寫技術文件、內容創作者

  1. 註冊 Cloudflare 帳號
  2. 建立 R2 儲存桶
  3. 設定 API 金鑰
  4. 在 PicGo/uPic 中加入 R2 設定
  5. 建立本地備份資料夾結構
  6. 在 Typora 中啟用自動上傳
  7. 測試完整流程

第三階段:工程師進階(1 小時)

適合對象:開源貢獻者、技術寫作者、追求完美的人

  1. 建立 GitHub repo 存放圖片
  2. 設定 jsDelivr CDN 連結格式
  3. 寫一個簡單的上傳腳本
  4. 設定自動化備份(rsync 或雲端同步)
  5. 建立圖片索引資料庫(可選)
  6. 設定每月檢查腳本(可選)

如果有詳細搭建步驟需求,告訴我,我會考慮寫詳細步驟博客。


常見問題解答

Q:免費圖床真的會倒閉嗎?

A:會。我親眼見過至少五個免費服務在三年內關閉。最有名的是 TinyPic,2019 年無預警關閉,影響了數百萬篇文章。

Q:付費服務比較貴嗎?

A:以 Cloudflare R2 來說,一般部落格(50GB)每月約 NT$150。相當於一杯手搖飲的價格,但換來的是內容的長期穩定。

Q:我該把所有舊文章的圖片都搬到圖床嗎?

A:不用一次做完。可以用「漸進式遷移」:新文章用圖床,舊文章在修改時順便遷移。或者先遷移流量最高的文章。

Q:圖床會不會影響 SEO?

A:不會。搜尋引擎在意的是圖片的 alt 文字、檔名和載入速度,不是圖片存放在哪裡。如果用 CDN,載入速度還可能更快。

Q:如果圖床服務改連結格式怎麼辦?

A:這就是為什麼要保留本地備份和替換腳本。我遇過一次,用腳本批次替換連結,半小時內就完成遷移。


結語:一個下午的投資,換來長期的安心

三年前的那個凌晨兩點,看著滿版破圖的我,絕對想不到今天我會寫出這篇文章。

現在的我,截圖上傳只要三秒,跨平台發布只要複製貼上,再也不用擔心圖片失效。

這套系統不完美,但它實際可行。

它經歷過兩次圖床服務倒閉、無數次平台遷移、三年的實戰考驗,到現在依然穩定運作。

如果你也厭倦了圖片管理的混亂,厭倦了每次發文都要重新上傳,厭倦了突然發現圖片全部失效的恐慌——

花一個下午,建立你自己的系統吧。

未來的你會感謝現在的你。


我想聽聽你的經驗

你目前怎麼管理 Markdown 的圖片?有沒有遇過圖床倒閉的慘劇?有沒有更好的解決方案?

歡迎在下方留言,我會認真讀每一則留言,說不定你的方法比我的更好。

如果這篇文章幫到你,也歡迎分享給同樣在用 Markdown 的朋友。我們這個小圈子,互相幫忙很重要。


快速參考:我推薦的工具組合

新手入門組合:

  • 圖床:Imgur(免費)
  • 工具:PicGo(跨平台)
  • 編輯器:Typora(付費,但值得)

認真寫作組合:

  • 圖床:Cloudflare R2(10G免費,付費,穩定)
  • 工具:uPic(Mac)或 PicGo(Windows)
  • 編輯器:Typora + 自動上傳設定
  • 備份:本地資料夾 + 每月檢查

工程師組合:

  • 圖床:GitHub + jsDelivr(免費)
  • 工具:自寫上傳腳本
  • 編輯器:VS Code + Markdown 外掛
  • 自動化:備份腳本 + 健康檢查

如果你喜歡這類實用的技術分享,歡迎追蹤我,我會持續分享更多開發者工具、寫作技巧和生產力心得。

下次見!

留言
avatar-img
留言分享你的想法!
avatar-img
Leon Wong 282
2會員
6內容數
Hi,我是 Leon Wong(亮之)——電腦科學與開發愛好者,也是 Notion 重度使用者。如果你想更高效地學習與創作,這裡會是你的實用資源。
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
將圖片添加到PDF文件中可以提升內容質量,使其更具吸引力。無論您是在製作專業文件、報告或演示文稿,插入圖片都是非常重要的。以下是使用各種工具進行操作的方法
Thumbnail
將圖片添加到PDF文件中可以提升內容質量,使其更具吸引力。無論您是在製作專業文件、報告或演示文稿,插入圖片都是非常重要的。以下是使用各種工具進行操作的方法
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
標示全部為已讀失效 最近發現留言系統中,"標示全部為已讀"的速度明顯變慢,甚至有時會失效。許多使用者都報告遇到了相同的問題。這實際上是程式設計中一個常見的漏洞。系統沒有充分考慮到整體容量問題與效能,才導致了這樣的情況。(實際原因待查,此處僅為一般解說),當系統開始顯示緩慢或出現其他問題時,通常
Thumbnail
標示全部為已讀失效 最近發現留言系統中,"標示全部為已讀"的速度明顯變慢,甚至有時會失效。許多使用者都報告遇到了相同的問題。這實際上是程式設計中一個常見的漏洞。系統沒有充分考慮到整體容量問題與效能,才導致了這樣的情況。(實際原因待查,此處僅為一般解說),當系統開始顯示緩慢或出現其他問題時,通常
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
在數位時代,圖片是內容行銷中不可或缺的元素。無論是社群媒體、部落格文章,或是電子報,都需要精美的圖片才能吸引讀者目光。然而,對於許多內容行銷創作者來說,設計圖片是一項挑戰。如果您是初學者,或是沒有時間學習複雜的設計軟體,那麼可以嘗試使用線上設計工具。線上設計工具簡單易用,即使沒有設計基礎也能輕鬆完成
Thumbnail
在數位時代,圖片是內容行銷中不可或缺的元素。無論是社群媒體、部落格文章,或是電子報,都需要精美的圖片才能吸引讀者目光。然而,對於許多內容行銷創作者來說,設計圖片是一項挑戰。如果您是初學者,或是沒有時間學習複雜的設計軟體,那麼可以嘗試使用線上設計工具。線上設計工具簡單易用,即使沒有設計基礎也能輕鬆完成
Thumbnail
這是一個簡單的工作流,可以對輸入的圖片進行3D重建
Thumbnail
這是一個簡單的工作流,可以對輸入的圖片進行3D重建
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News