在html中直接显示二进制图片，核心是将二进制数据转换为浏览器可识别的资源格式，常见的实现方式包括base64编码转换、Blob对象生成临时URL等，不同方式适用于不同的使用场景。
二进制图片的常见来源
二进制图片通常指以二进制流形式存在的图片数据，常见的获取场景有以下几种：
- 后端接口直接返回二进制图片流，响应头Content-Type为image/png、image/jpeg等图片类型
- 前端通过FileReader读取本地上传的文件得到的二进制数据
- 从数据库、本地存储中读取的已保存的二进制图片内容
方法一：转换为base64编码展示
base64是一种基于64个可打印字符表示二进制数据的方法，浏览器支持直接在<img>标签的src属性中使用base64编码的图片数据，格式为data:图片MIME类型;base64,编码后的字符串。
后端返回二进制流时的处理
如果后端接口返回二进制图片流，前端可以通过fetch请求获取二进制数据，再转换为base64：
// 请求二进制图片接口
fetch('/api/get-binary-image')
.then(response => {
// 获取二进制数据
return response.blob();
})
.then(blob => {
// 创建FileReader读取为base64
const reader = new FileReader();
reader.onload = function() {
// 得到base64地址，赋值给img标签
const imgUrl = this.result;
document.getElementById('binary-img').src = imgUrl;
};
reader.readAsDataURL(blob);
})
.catch(err => {
console.error('获取图片失败', err);
});
对应的html结构如下：
<img id="binary-img" alt="二进制图片展示">
本地二进制数据转换
如果是本地已有的二进制数据，也可以直接拼接base64前缀展示：
// 假设binaryData是已有的二进制图片数据，imageType是图片类型如'image/png'
const base64Str = `data:${imageType};base64,${binaryData}`;
document.getElementById('local-img').src = base64Str;
方法二：使用Blob对象生成临时URL
除了base64转换，还可以将二进制数据封装为Blob对象，再通过URL.createObjectURL生成临时的资源地址，赋值给<img>标签的src属性即可。
// 二进制数据数组，假设是后端返回的二进制流转换的数组
const binaryArray = new Uint8Array([/* 二进制数据内容 */]);
// 创建Blob对象，指定图片类型
const blob = new Blob([binaryArray], { type: 'image/png' });
// 生成临时URL
const imgUrl = URL.createObjectURL(blob);
// 赋值给img标签
document.getElementById('blob-img').src = imgUrl;
// 使用完成后可以释放临时URL，避免内存泄漏
// URL.revokeObjectURL(imgUrl);
两种方式的对比
两种方式各有适用场景，具体差异如下：
| 对比项 | base64编码方式 | Blob临时URL方式 |
|---|---|---|
| 数据大小 | 编码后体积比原二进制大30%左右 | 体积和原二进制一致 |
| 适用场景 | 小图片、需要持久化存储图片数据的场景 | 大图片、临时展示不需要持久化的场景 |
| 内存占用 | 会占用更多内存，因为需要存储编码后的字符串 | 内存占用更低，临时URL使用完可释放 |
注意事项
- 转换base64时需要正确指定图片的MIME类型，否则浏览器可能无法正确解析图片
- 使用Blob临时URL时，如果图片不再需要展示，建议调用
URL.revokeObjectURL释放内存，避免内存泄漏 - 如果二进制数据本身已经是base64编码的字符串，不需要重复编码，直接拼接data前缀即可使用
- 二进制数据如果包含特殊字符，转换前需要确认编码格式，避免出现乱码导致图片无法展示
需要注意的是，直接在html中展示二进制图片仅适用于小体积图片或者临时展示场景，如果是大量图片或者需要长期访问的图片，建议还是将图片存储到服务器，使用普通URL访问，性能会更优。