我的使用场景是这样的：我的图片文件存储在数据库中，前端现在要图片显示。

我的思路是这样的：

1. 后端返回buffer数据给前端

2. 前端拿到buffer后将这个数据放入blob中

3. 再经过URL.createObjectURL()方法将其变为临时url以供前端显示图片

4. 按照这个思路，我们开始吧。

一、前端拿到buffer数据，如下图所示

data中存储的是后端传过来的二进制图像数据，控制台是以三位十进制数表示的，类型可以看到是buffer。

二、将刚刚拿到的数据转换为 Blob 对象

const blob = new Blob([binaryData], { type: 'image/png' });

注意：此处MIME格式{ type: 'image/png' }需要按照你自己的需求来调整type，因为我的图像数据是png图片，所以我的type: 'image/png'。

以下是一些常见的 MIME 类型及其示例：

text/plain: 普通文本文件

text/html: HTML 文件

application/json: JSON 数据

image/jpeg: JPEG 图像

audio/mp3: MP3 音频文件

video/mp4: MP4 视频文件

application/pdf: PDF 文档

三、创建一个包含 blob 数据的 URL

imageUrlRef.value = URL.createObjectURL(blob)

注意：此处URL.createObjectURL(blob)的(blob)是上文中new的blob对象。imageUrlRef.value是我在vue3页面中自定义的数据，将这个url赋值给imageUrlRef。

这个url为：blob:http://localhost:5173/e069c112-5010-4ef7-8288-dcbae8838e7c

打印出来如下图所示：↓

四、将这个临时url放到img标签中使用

<img v-if="imageUrlRef" :src="imageUrlRef" alt="场景图片，请等待加载..." class="responsive-image">

发现图像并不能显示

将url放入浏览器地址栏访问也失败

问题出在：Blob的数据源不能是一个普通数组，需要使用适合二进制传输的Uint8Array

//将刚刚后端传来的buffer数据变成一个Uint8Array
const uint8Array = new Uint8Array(bufferData);
//再将这个uint8Array转换成blob
const blob = new Blob([uint8Array], { type: 'image/png' });
//再将这个blob转换成URL
imageUrlRef.value = URL.createObjectURL(blob)

可以看到拿到了图像数据并渲染成功

buffer类型文件转blob图片生成url无法显示，尝尝这个解决办法！