Vue前端渲染blob二进制对象图片的方法

近期做开发,联调接口。接口返回的是一张图片,是对二进制图片处理并渲染,特此记录一下。

本文章是转载文章,原文章:Vue前端处理blob二进制对象图片的方法

接口response是下图

在这里插入图片描述
显然,获取到的是一堆乱码,前端需要将其解析出来,百度之后发现解析二进制文档流的写法如下:
1.定义接口的时候加上responseType

export function ImgTest() {
  return request1({
    url: "/test",
    method: "get",
    responseType: "blob",
  });
}

methods中,imgUrl是接收的模型

 ImgTest() {
   ImgTest().then((res) => {
     const url = window.URL.createObjectURL(new Blob([res]));
     console.log(url, "工作流图片");
     this.imgUrl = url;
   });
 },

打印得到:

在这里插入图片描述
由此,图片可以正常显示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/46952.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Docker】安全及日志管理

目录 一、Docker 安全及日志管理1.1 Docker 容器与虚拟机的区别1. 隔离与共享2. 性能与损耗 1.2Docker 存在的安全问题1.Docker 自身漏洞2.Docker 源码问题 1.3 Docker 架构缺陷与安全机制1. 容器之间的局域网攻击2. DDoS 攻击耗尽资源3. 有漏洞的系统调用4. 共享root用户权限 …

网安第二天笔记

ssh 22端口 账号密码登陆、证书登录 smtp 25端口 邮件协议 DNS 53 DHCP 67 68端口 四个包 1.DHCP服务器:服务器管理IP地址池和配置参数 2.客户端请求:发送DHCP广播请求,discover消息 3.DHCP服务器回应:收到discover会回复offer…

PostMan+Jmeter+QTP工具介绍及安装

目录 一、PostMan介绍​编辑 二、下载安装 三、Postman与Jmeter的区别 一、开发语言区别: 二、使用范围区别: 三、使用区别: 四、Jmeter安装 附一个详细的Jmeter按照新手使用教程,感谢作者,亲测有效。 五、Jme…

Linux_CentOS_7.9部署Docker以及镜像加速配置等实操验证全过程手册

前言:实操之前大家应该熟悉一个新的名词DevOps 俗称开发即运维、新一代开发工程师(Development和Operations的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障&…

Angular:动态依赖注入和静态依赖注入

问题描述: 自己写的服务依赖注入到组件时候是直接在构造器内初始化的。 直到看见代码中某大哥写的 private injector: Injector 动态依赖注入和静态依赖注入 在 Angular 中,使用构造函数注入的方式将服务注入到组件中是一种静态依赖注入的方式。这种方…

Python显示循环代码的进度条

目录 1. tqdm库 2. alive_progress库 3. progressbar库 1. tqdm库 tqdm是一个快速,可扩展的Python进度条,可以在Python长循环中添加一个进度提示信息 import time from tqdm import trangefor i in trange(100):# do somethingtime.sleep(0.5) 2. a…

微服务——Nacos配置管理

目录 Nacos配置管理——实现配置管理 配置管理实践 Nacos配置管理——微服务配置拉取 Nacos配置管理——配置热更新 方式一: ​编辑 方式二(推荐方式): Nacos配置管理——多环境配置共享 优先级问题 Nacos配置管理——nacos集群搭建 总结​编辑 Nacos配置管理——实现配置管…

【ADS】导入CMOS衬底文件+使用coilsys生成电感

新建工程经常忘记怎么操作,简记防遗忘。 操作步骤 1.unzip file2.原理图仿真3.Layout加载衬底文件4.使用coilsys生成电感 1.unzip file designKits-》unzip,选择对应库的压缩包,我这里是(TSMC_CRN65GP_v2.zip)。 为了…

BHQ 1Mal,BHQ-1 Maleimide,BHQ1马来酰亚胺,黑洞猝灭剂

资料编辑|陕西新研博美生物科技有限公司小编MISSwu​ PART1----产品描述: BHQ-1 Maleimide黑洞猝灭剂-1(BHQ-1)被归类为暗猝灭剂,该淬灭剂能够将一定距离内荧光基团发出的光全部吸收,实现对荧光信号的淬灭,所以可得到更强的特异性…

【App管理04-Bug修正 Objective-C语言】

一、咱们刚才已经把这个给大家做完了吧 1.这个Label怎么显示到上面去了, 我们现在是把它加到我们的控制器的View里面吧 我们看一下这个坐标是怎么算的,来,我们找一个坐标, 咱们的坐标,是不是用这个View的frame,减的吧 来,咱们在这里,输出一下这个Frame,看一下吧 在…

2023年第三届能源、电力与电气工程国际会议 (CoEEPE 2023)

会议简介 Brief Introduction 2023年第三届能源、电力与电气工程国际会议(CoEEPE 2023) 会议时间:2023年11月22日-24日 召开地点:澳大利亚墨尔本 大会官网:www.coeepe.org 2023年第三届能源、电力与电气工程国际会议(CoEEPE 2023)由安徽大学、…

Linux:Linux的发展史和作用有哪些?

文章目录 Linux是什么?Linux的开源特征为什么要学习Linux?Linux的应用场景有哪些? Linux是什么? 简单来说,Linux就是操作系统,它和Windows等软件一样,都只是操作系统,并无区别 Linu…

如何将ubuntu LTS升级为Pro

LTS支持周期是5年; Pro支持周期是10年。 Ubuntu Pro专业版笔记 步骤: 打开“软件和更新” 可以看到最右侧的标签是Ubuntu Pro。 在没有升级之前,如果使用下面两步: sudo apt updatesudo apt upgrade 出现如下提示&#xff…

vue 实现课程表甘特图

1 封装 components <template><view style"padding-bottom: 100rpx;"><view class"header flex_sb"><div class"header_list flex" v-for"(item,index) in timeList" :key"item.value"><div&g…

微信小程序——页面跳转方法和场景用法总结

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

如何在APP开发中实现多平台兼容?

随着移动互联网的发展&#xff0c;各大 APP平台也如雨后春笋般崛起&#xff0c;现在市面上主流的 APP平台基本都已经支持 IOS、 Android、 WP等多个平台的开发&#xff0c;但对于一些只想专注于做一款 APP的企业来说&#xff0c;往往只能选择在一个平台开发一个 APP&#xff0c…

opencv hand openpose

使用opencv c 来调用caffemodel 使用opencv 得dnn 模块调用 caffemodel得程序&#xff0c;图片自己输入就行&#xff0c;不做过多得解释&#xff0c;看代码清单。 定义手指关节点 const int POSE_PAIRS[20][2] { {0,1}, {1,2}, {2,3}, {3,4}, // thumb {0,5}, {5,6}, {6,7}…

索引能优化查询,那么谈谈索引的优点和缺点?索引原理

面试必备&#xff1a;索引能优化查询&#xff0c;那么谈谈索引的优点和缺点?索引原理 简述&#xff1a; 优点: 第一&#xff0c;通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。 第二&#xff0c;可以大大加快数据的检索速度&#xff0c;这也是创建…

leetcode刷题常用代码片段

Vscode是常用的开发工具&#xff0c;代码插入能够把常见的代码嵌入智能提醒&#xff0c;减轻了很大的工作量&#xff0c;下面是我刷题的配置&#xff0c;直接复制黏贴到自己的cpp.json里就可以用了 左下角&#xff0c;打开设置&#xff0c;选择用户代码片段&#xff0c;选择自…

idea中Easy Code模版配置

首先找到模版位置 找到使用的模版&#xff0c;我用的是MybatisPlus-H,这是我新建的一个模版 controller.java.vm模版 ##导入宏定义 $!{define.vm}##设置表后缀&#xff08;宏定义&#xff09; #setTableSuffix("Controller")##保存文件&#xff08;宏定义&#xff…