关于vue二进制转图片显示问题 后端返回的是byte[]数组

下面是关于vue二进制转图片显示问题的完整攻略。

问题描述

在开发过程中，有时后端返回的数据可能是一个byte[]数组，而我们需要将其转换为图片进行展示。但是直接将该数组作为图片src的值加载时，浏览器会提示无法识别的图片格式。那么该如何处理这个问题？

解决方案

方案一

使用base64编码将二进制数据转换为base64字符串再进行展示。

// 将byte[]数组转换为base64字符串
let base64img = btoa(String.fromCharCode.apply(null, byteArray));
// 将base64字符串作为图片src的值进行展示
<img :src="'data:image/jpeg;base64,'+ base64img" />

这种方案的好处是比较简单易懂，适合处理较小的图片。但是对于大图片，会导致页面加载速度变慢。

方案二

使用Blob对象将二进制数据转换为图片再进行展示。

// 将byte[]数组转换为Blob对象
let blob = new Blob([byteArray], { type: 'image/jpeg' });
// 将Blob对象转换为URL，用于设置图片src
let objectUrl = URL.createObjectURL(blob);
// 将URL作为图片src的值进行展示
<img :src="objectUrl" />

这种方案的好处是对于大图片性能比较好，但是需要注意的是需要手动释放URL以避免内存泄漏。

示例说明

下面是两个示例说明，分别展示了上述两种方案的具体使用方法。

示例一

// 假设后端返回的数据为byteArray
let base64img = btoa(String.fromCharCode.apply(null, byteArray));
// 将base64字符串作为图片src的值进行展示
<img :src="'data:image/jpeg;base64,'+ base64img" />

示例二

// 假设后端返回的数据为byteArray
let blob = new Blob([byteArray], { type: 'image/jpeg' });
let objectUrl = URL.createObjectURL(blob);
// 将URL作为图片src的值进行展示
<img :src="objectUrl" />
// 在组件销毁时手动释放URL
beforeDestroy() {
  URL.revokeObjectURL(this.objectUrl);
}

以上就是关于vue二进制转图片显示问题的完整攻略，希望能够对你有所帮助。