應用場景使用範例
Base64 圖像怎麼用
這裡提供最常見的使用情境與可直接複製的範例。你可以將轉換後的結果替換進範例中快速驗證
你會拿到兩種形式: Data URL（含 MIME 前綴）與原始 Base64（不含前綴）
Data URL（推薦）
data:image/png;base64,QUJDZA==原始 Base64
QUJDZA==在網頁中直接顯示（HTML）
適用於快速預覽、嵌入靜態頁面或不需額外資源託管的情境
Convert an image to a Base64 Data URL<img src="data:image/png;base64,QUJDZA==" alt="Base64 Image" width="240" />
作為背景圖使用（CSS）
適合圖示、佔位圖、小型裝飾圖，減少一次資源請求
Create an image Base64 string first.banner {
background-image: url("data:image/png;base64,QUJDZA==");
background-size: cover;
background-position: center;
}介面 / JSON 傳輸
適用於除錯、原型、臨時傳輸。正式環境不建議長期內嵌大圖
{
"filename": "image.png",
"mime": "image/png",
"dataUrl": "data:image/png;base64,QUJDZA=="
}若後端僅需要原始 Base64，可傳送
QUJDZA==，並另行傳送 mime/type。行動端 / 跨平台使用（範例）
任何支援 Base64 的執行環境都可使用。這裡提供常見寫法供你替換驗證
Verify a Base64 string before using it in an appimport 'dart:convert';
import 'package:flutter/widgets.dart';
final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);什麼時候不建議使用 Base64？
- 大圖長期內嵌（體積會明顯增加，影響載入）
- 需要 CDN 快取命中、長期重用的靜態資源
- 對首屏效能與快取策略要求很高的圖片資源
Base64 更適合「資料流轉與快速交付」，不適合取代完整的靜態資源體系