理解 data:image/png;base64:封裝和真實位元組

在首個逗號處分割 Data URI,區分 Base64 與百分號編碼,並檢查型別宣告和載荷是否一致。

data:image/png;base64, 是字首,不是一張完整圖片。它說明資源內嵌在 URL 中:協議為 data,宣告型別為 image/png,base64 標記表示後面的載荷使用 Base64。逗號將後設資料與資料分開。

按結構讀取

data:[媒體型別][;base64],載荷

data:text/plain;base64,SGVsbG8=
data:text/plain,Hello%20world

第一個示例通過 Base64 表示 Hello,第二個採用百分號編碼。解析器需要先看後設資料,再選擇解碼方法。將完整 URI 交給只接受 Base64 的解碼器會失敗,因為冒號、分號和逗號不是載荷字元。

應在第一個逗號處分割,不能拆分所有逗號:剩餘資料本身可能包含逗號,尤其是未採用 Base64 的文本 URI。媒體引數可以放在 base64 標記前。省略媒體型別時,格式有預設文本型別與字元集,但預設值不會自動讓二進位制變成可讀文字。

MIME 標籤只是宣告

任何輸入都可以寫上 image/png,它不能證明位元組真的構成 PNG。應先比較檔案簽名,再用影像解碼器載入。同樣,PDF 檔案頭只是識別線索,完整解析仍可能失敗。

將 image/png 改為 image/jpeg 不會轉換圖片。轉換需要解碼原圖,再按目標格式重新編碼,可能影響透明度、後設資料、畫質和體積。需要這些資訊時應保留原件。

恢復資源,不執行內容

先解析檢查。文本按文字顯示,受支援的點陣圖在影像元素中預覽。不要把任意 HTML 或 SVG 標記直接插入頁面。Data URL 可以包含活動內容,自包含並不等於安全。

下載時保留位元組,並根據可靠格式資訊選擇副檔名。診斷介面應分別顯示宣告型別和檢測型別,讓不一致顯式可見。語法和預設值見 MDN: data URLs。