传一张小图标就出结果

何砚清给连锁烘焙品牌的小程序做底部导航，想把 5 个图标内嵌进 WXSS 省掉首屏请求。点"选择图片"传一张 240×240 的 PNG 图标，1270 字节，上传完立刻出结果，不必再按任何按钮。输出框直接给完整的 data:image/png;base64, 串，下方提示"已生成 data URI（1.7 KB）。"，预览区同时显出这张图。工具走 FileReader.readAsDataURL()，图片不出本机。

方向只管转换按钮

"转换方向"下拉给两档，本案例保持默认的图片转 Base64。这一项只管"转换"按钮的行为，不影响上传：无论选哪一档，选图片都直接生成 data URI。要做反向还原，得切到 Base64 转图片那一档，并把字符串粘进左侧输入框。何砚清的做法是先看预览确认图没错再复制，编码错了照样能出字符串，只是预览显示不出来。

核对前缀与膨胀比例

输出串以 data:image/png;base64, 打头，后面 1696 个字符，完整 data URI 共 1718 字符。核对两处：前缀里的"image/png"与原图是不是一致，以及提示报的 1.7 KB 对不对得上 1270 字节编码后膨胀约三分之一。串开头 iVBORw0KGgo 对应 PNG 文件头 89 50 4E 47，若见 /9j/ 则是 JPEG。写进"background-image: url(...)"时得用带前缀的完整串，逗号与分号都在里面，引号不能省。

复制成 CSS 变量再算总账

底部三个按钮是"转换"、"复制结果"、"下载"。何砚清用"复制结果"把串取走，在 WXSS 顶部定义 --icon-home，下面统一引用这个变量，换图标只改一处。"下载"在图片转 Base64 这一档把 data URI 存成 image.png，后缀跟原图 MIME 走。5 个图标各约 1.7 KB，合计约 8.5 KB 进包体，小图才划算，大图内嵌会让样式表膨胀又没法单独缓存。

企业知识网（ www.qiyezhishi.com ）提供的结果为参考性内容，不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。