FlexCraft Logo
FlexCraftBETA
模板 Blog

如何修復 LINE Flex Message API Error 400：佈局、字級與圖片全攻略

發布於 April 28, 2026 11 次閱讀

如果你正在為企業系統開發 LINE Bot 或進行整合，你可能遇到過令人沮喪的 API Error 400，並伴隨着模糊的錯誤訊息："A message in the request body is invalid"。

與使用 HTML/CSS 的標準網頁開發不同，LINE Flex Message 渲染引擎強制執行嚴格的 Schema 驗證。屬性中的一個拼寫錯誤、超出範圍的字體大小，或帶有動態參數的圖片網址，都會導致 LINE 伺服器拒絕你的整個請求。

在本文中，我們將剖析兩個真實的生產案例：企業每月薪資單與汽車 OMO 維護報告，以揭示最常見的佈局陷阱，以及如何構建 100% 合規且像素完美的 Flex Message。

1. 企業薪資單：掌握嵌套網格與字體大小限制

將 HR 系統遷移到無紙化 LINE 通知時，乾淨且像 Excel 般的網格對齊是首要任務。由於 LINE Flex Message 不支援標準的 <table> 標籤，我們高度依賴 horizontal 和 vertical 盒子（Box）的嵌套。

對齊的小技巧

為了讓項目完美對齊（例如左側的獎金項目與右側的金額對齊），不要盲目地為文字組件設定 flex 權重。保持左側項目具有彈性，並將右側項目設定為 "align": "end"。這確保了無論薪資金額有多少位數，右側列都能完美對齊而不會發生水平裁剪。

"xxxxs" 大小的陷阱（400 錯誤的元兇）

為了讓底部的隱私聲明或註腳看起來低調，許多開發者會下意識地輸入 "size": "xxxxs"。

請立即停止！ LINE Flex Message 的規範嚴格強制執行 "xxs" 作為絕對最小字體大小。傳入任何小於 "xxs" 的值都會立即觸發 APIError 400 (invalid property)。

合規的解決方案

將字體大小保持在合法的 "xxs"，但利用色彩心理學來弱化文字。設定 "color": "#9CA3AF"（淺灰色）可以在保持驗證器正常的同時，達到理想的低調視覺層次感。

{
  "type": "box",
  "layout": "horizontal",
  "contents": [
    { "type": "text", "text": "➕ 基本底薪", "size": "xs", "color": "#4B5563" },
    { "type": "text", "text": "$55,000", "size": "xs", "color": "#1F2937", "align": "end" }
  ]
}

2. 汽車維修報告：繞過手機端圖片封鎖與動態狀態映射

對於修車廠或經銷商來說，Flex Message 報告是吸引車主進行二次進廠（OMO - 線上融合線下）的強大工具。然而，這也是臭名昭著的「圖片不顯示 / 連結失效」錯誤頻繁發生的地方。

為什麼圖片在手機上無法顯示？

你可能會發現你的圖片網址在桌機瀏覽器中運行良好，但在手機 LINE App 中卻完全顯示為空白。這是由於 LINE 代理伺服器的兩種嚴格行為造成的：

  1. 動態查詢參數導致解析失敗：LINE 的渲染引擎經常無法解析包含問號的動態查詢字串（例如以 ?auto=format&fit=crop... 結尾的 Unsplash 網址）。
  2. 來源（Referrer）或 User-Agent 封鎖：各大免費圖片代管網站為了節省頻寬，會封鎖來自 LINE 等公司代理伺服器的外部鏈結。

生產環境解決方案：Cloudflare R2 代管

在生產環境中，請務必將你的資產託管在安全且不含查詢參數的 CDN 上。我們強烈推薦 Cloudflare R2，因為它每月提供 10 GB 的免費儲存空間，且免收出流量費（免頻寬費）。請確保你的 "url" 指向一個乾淨、結尾為實體副檔名（如 .jpg 或 .png）的靜態端點。

動態 UI 狀態觸發

透過使用後端框架（如 Go 語言），你可以將車輛診斷數據直接映射到 JSON 佈局中。使用綠色的 ✓ 已完成 (#16A34A) 標出正常項目，並以顯眼的紅色 ⚠ 建議更換 (#DC2626) 標出緊急維修項目，利用強烈的顏色對比引導用戶順暢地點擊頁尾的 CTA 按鈕（例如「立即線上預約下次保養」）。

總結

無論你是在處理機密的內部企業數據，還是部署高流量的消費端 OMO 廣告活動，了解 LINE Flex Message Schema 的嚴格邊界對於系統穩定性至關重要。

為了加快你的開發進度，我整理並開源了一系列生產就緒、100% 合規的繁中/日文商用 Flex Message 模板。歡迎複製、修改並為該倉庫點擊 Star！

👉 在此獲取開源 JSON 模板：
https://github.com/arieslee/line-flex-message-templates

如果你厭倦了盲目猜測 JSON Schema，並希望擁有流暢的視覺化編輯體驗，請不要忘記查看我們的核心專案 FlexCraft —— 專為 LINE Flex 和 Rich Message 設計的專業視覺化產生器。