应用场景使用示例

Base64 图像怎么用

这里提供最常见的使用场景与可直接复制的示例。你可以把转换后的结果替换进示例中快速验证

你会拿到两种形式: Data URL (带 mime 前缀) 与原始 Base64 (不带前缀)

Data URL (推荐)

data:image/png;base64,QUJDZA==

原始 Base64

QUJDZA==

网页中直接显示(HTML)

适用于快速预览、嵌入静态页面或无需额外资源托管的场景

<img
  src="data:image/png;base64,QUJDZA=="
  alt="Base64 Image"
  width="240"
/>

作为背景图使用(CSS)

适合图标、占位图、小型装饰图，减少一次资源请求

.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 的运行环境都能使用。这里提供常见写法供你替换验证

import 'dart:convert';
import 'package:flutter/widgets.dart';

final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);

什么时候不建议用 Base64?

Base64 更适合“数据流转与快速交付”，不适合替代完整的静态资源体系