关于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二进制转图片显示问题的完整攻略,希望能够对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:关于vue二进制转图片显示问题 后端返回的是byte[]数组 - Python技术站

(0)
上一篇 2023年5月29日
下一篇 2023年5月29日

相关文章

  • VUEJS实战之构建基础并渲染出列表(1)

    “VUEJS实战之构建基础并渲染出列表(1)”是一个Vue.js实战教程,主要讲解如何使用Vue.js构建基础并渲染出列表。下面是该教程的完整攻略: 一、环境搭建 首先,我们需要在本地搭建Vue.js的开发环境。具体步骤如下: 安装Node.js和npm; 使用npm安装Vue.js:npm install vue; 在HTML文件中引入Vue.js:&lt…

    Vue 2023年5月27日
    00
  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    在使用 mpvue + vuex 开发微信小程序时,可能会遇到 vuex 辅助函数 mapState、mapGetters 不可用的问题。这是因为 mpvue 框架在编译时将 store 对象注入到每个组件的 data 属性中,而在 wxs 中无法访问 data 中的对象,因此会导致 mapState、mapGetters 函数无法正常使用。 要解决这个问题…

    Vue 2023年5月27日
    00
  • 基于Vue实例对象的数据选项

    基于 Vue 实例对象的数据选项是指在 Vue 实例创建时,在 data 选项中定义的数据。在 Vue 应用中,通常用于存储和操作需要被动态绑定的数据,以及应用内的状态。Vue 实例中的 data 数据对象可以通过任意命名的属性来访问和修改,也可以直接传递给组件(子组件)。 以下是使用 Vue 实例对象的数据选项的步骤: 在 Vue 实例的 data 选项中…

    Vue 2023年5月27日
    00
  • vue3组合式API中setup()概念和reactive()函数的用法

    Vue 3的组合式API是一种全新的API,可以帮助我们更好地组织代码,以及管理组件内的状态和逻辑。其中,setup()是一个非常重要的概念,而reactive()则是其核心函数之一。 什么是setup()函数 setup()函数是组合式API中的一个重要概念,它允许我们在组件初始化时进行一些设置,例如定义变量、创建函数等等。这个函数在组件实例化之前被调用,…

    Vue 2023年5月28日
    00
  • Vue实现动态响应数据变化

    实现动态响应数据变化是 Vue.js 的核心特性之一,它使得数据变化时能够自动更新视图。以下是 Vue 实现动态响应数据变化的详细攻略。 1. Vue 实例的响应式数据 在 Vue 实例中声明的每个属性都是响应式的,也就是说,当数据发生变化时,视图会自动更新。例如,在以下 Vue 代码中,当 message 数据发生变化时,页面中绑定的 {{ message…

    Vue 2023年5月28日
    00
  • Vue3 reactive响应式赋值页面不渲染的解决

    下面我将为你详细讲解“Vue3 reactive响应式赋值页面不渲染的解决”的完整攻略。 问题描述 在Vue3中,我们可以使用reactive响应式编程,对数据进行监听,当数据发生改变时,页面会自动重新渲染。但有时候在赋值时,页面却没有发生渲染,这是一个常见的问题。 解决方案 方案一:使用toRefs Vue3中的reactive返回的对象是一个Proxy,…

    Vue 2023年5月27日
    00
  • vue 实现 tomato timer(蕃茄钟)实例讲解

    下面是详细讲解 “vue 实现 tomato timer(蕃茄钟)实例讲解”的完整攻略。 一、项目介绍 蕃茄钟是一种时间管理方法,采用对数目进行计数的方式来提高工作效率。本项目中我们将使用 Vue 来实现一个基础版的蕃茄钟。 二、项目结构 ├── App.vue ├── main.js ├── components │ ├── Timer.vue │ └──…

    Vue 2023年5月27日
    00
  • vue项目接口管理,所有接口都在apis文件夹中统一管理操作

    当我们在开发Vue项目时,通常需要与后端进行交互,而后端接口的管理十分重要。为了更好的管理接口,一种比较好的方式是采用apis文件夹来统一管理操作所有接口。 实现该功能需要遵循以下几步骤: 创建apis文件夹 在Vue项目下面src目录下创建一个apis文件夹。这个文件夹将存放与后端接口相关的文件。 定义接口文件 在apis文件夹下创建一个user.js的文…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部