完整小案例
将图标用于原型页面内联
输入: icon-32.png（上传文件）
操作: 图片 → Base64，再补 `data:image/png;base64,` 前缀。
输出: 得到可直接用于 img src 属性的 Data URL。
图片转 Base64 / Data URL 的常见做法
用于文档、演示页或原型时，可把小图转为 Base64 或 Data URL，减少外部资源依赖。
适用输入类型
- 需要内联展示的 PNG/JPG/SVG 图片文件
- 待校验或待预览的 Data URL 字符串
- 未带前缀的纯 Base64 图片内容
操作步骤
- 进入图片工作区并上传图片。
- 复制输出结果；若目标环境要求 Data URL，请补齐前缀。
- 粘贴到 HTML/CSS 并确认浏览器渲染正常。
本场景常见问题
Data URL 前缀缺失或类型错误
浏览器不显示图片时，优先检查 data:image/;base64, 前缀与真实文件类型是否一致。
文件过大导致内容过重
Base64 内联更适合小资源。大图建议继续走文件 URL。
SVG 解码后预览失败
请确保使用 `image/svg+xml`，并确认 SVG 文本本身是有效 XML。