后端返回Blob图片数据，前端如何正确显示？

后端返回blob图片数据，前端如何正确显示？

在前端开发中，经常需要显示后端返回的图片数据。如果后端返回的是Blob类型的图片数据，直接在

一种常见的解决方案是：后端将Blob数据转换为Base64编码的字符串再返回给前端。 Base64编码将二进制数据转换为文本格式，前端可以直接使用这个Base64字符串作为标签的src属性值。

例如，后端可以使用相应的库函数将Blob数据转换为Base64字符串，并将其作为响应体的一部分返回。前端收到Base64字符串后，可以使用如下代码显示图片：

// 假设后端返回的Base64字符串存储在变量base64Image中 const img = document.createElement('img'); img.src = `data:image/png;base64,${base64Image}`; // 根据实际图片类型调整'image/png' document.body.appendChild(img);

data:image/png;base64, 是Base64数据的标识符，image/png 需要根据图片的实际MIME类型（例如image/jpeg）进行调整。 将后端返回的Base64字符串添加到标识符之后，即可在标签中正确显示图片。 这种方法简化了前端代码，提高了开发效率。 但是需要注意的是，Base64编码后的数据体积大约会增加三分之一，传输效率略低。 对于大型图片，建议考虑其他更优方案，例如直接使用URL或使用更高效的二进制数据处理方法。

立即学习“前端免费学习笔记（深入）”；