Vue 读取后台二进制文件流转为图片显示

Vue 读取后台二进制文件流转为图片显示
后台返回格式
在这里插入图片描述
在这里插入图片描述

 <img :src="payImg" id="image" style="width: 150px;height: 150px;" alt="">

axios写法

在这里插入图片描述

重点 responseType: ‘blob’ , 使用的是res中的data blob

this.$axios.post('http://116.148.227.196:xxx/api/xxx/xxx', {参数}, {
    responseType: 'blob' // 重点
  }).then((res) => {
      const url = window.URL.createObjectURL(new Blob([res.data], { type: 'image/png' }));
      
      this.payImg= url;

  });

本文章参考 https://huaweicloud.csdn.net/63a56170b878a545459459f2.html

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

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

相关文章

Linux之线程互斥与同步

1.线程互斥相关概念 临界资源&#xff1a;多线程执行流共享的资源就叫做临界资源 。 临界区&#xff1a;每个线程内部&#xff0c;访问临界自娱的代码&#xff0c;就叫做临界区。 互斥&#xff1a;任何时刻&#xff0c;互斥保证有且只有一个执行流进入临界区&#xff0c;访问临…

【Locust分布式压力测试】

Locust分布式压力测试 https://docs.locust.io/en/stable/running-distributed.html Distributed load generation A single process running Locust can simulate a reasonably high throughput. For a simple test plan and small payloads it can make more than a thousan…

Ubuntu-22.04安装VMware虚拟机并安装Windows10

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、VMware是什么&#xff1f;二、安装VMware1.注册VMware账号2.下载虚拟机3.编译vmmon&vmnet4.加载module5.安装bundle 三、安装Windows101.基础配置2.进阶…

Java基础_15集合及其方法

今天的内容 1.集合 1.集合【重点】 1.1为什么使用集合 集合和数组是一样的都是用来存储数据的&#xff01;&#xff01;&#xff01; 真实的开发的时候&#xff0c;使用的是集合不是数组&#xff0c;为啥&#xff1f; 数组存数据: ​ 1.数组的容量是固定的 ​ 2.数组封装的方法…

Dude, where’s that IP? Circumventing measurement-based IP geolocation(2010年)

下载地址:https://www.usenix.org/legacy/event/sec10/tech/full_papers/Gill.pdf 被引次数:102 Gill P, Ganjali Y, Wong B. Dude, Wheres That {IP}? Circumventing Measurement-based {IP} Geolocation[C]//19th USENIX Security Symposium (USENIX Security 10). 2010.…

基于springboot实现常州地方旅游管理系统项目【项目源码+论文说明】

基于springboot实现旅游管理系统演示 摘要 随着旅游业的迅速发展&#xff0c;传统的旅游信息查询方式&#xff0c;已经无法满足用户需求&#xff0c;因此&#xff0c;结合计算机技术的优势和普及&#xff0c;针对常州旅游&#xff0c;特开发了本基于Bootstrap的常州地方旅游管…

IDM激活步骤-亲测可用

前言&#xff1a;我试了3种方法&#xff0c;仅以下方法激活成功&#xff0c;其他都是30天试用 使用步骤&#xff1a; 1.从官网下载IDM并安装&#xff1a;https://www.internetdownloadmanager.com/ 2.下载激活工具&#xff1a;https://wwif.lanzouw.com/iSY2N16s81xi &#…

Python测试框架之pytest详解

前言 Python测试框架之前一直用的是unittestHTMLTestRunner&#xff0c;听到有人说pytest很好用&#xff0c;所以这段时间就看了看pytest文档&#xff0c;在这里做个记录。 官方文档介绍&#xff1a; Pytest is a framework that makes building simple and scalable tests e…

生成式AI对UiPath来说是机遇还是挑战?

企业争相通过技术革新来领跑市场&#xff0c;机器人流程自动化&#xff08;RPA&#xff09;技术更是将企业的效率和成本控制推向了新的高度。但当人工智能&#xff08;AI&#xff09;的最新进展——生成式AI登上舞台时&#xff0c;它不仅带来了变革的可能&#xff0c;还提出了一…

创建网络名称空间后的Linux幕后工作解析

Linux网络名称空间&#xff08;Network Namespace&#xff09;是一种强大的虚拟化技术&#x1f310;&#xff0c;允许用户隔离网络设备、IP地址、路由表等网络资源。这项技术在容器化和虚拟化领域发挥着关键作用&#xff0c;是构建现代云基础设施的基石之一⛅。当你创建一个新的…

lovesql 手工sql注入

1.页面 2.万能密码登录成功 我还傻乎乎的以为密码就是flag 但不是 3. 继续注入 判断列数 确定了只有三列 开始尝试联合注入 4.使用联合注入之前先判断显示位 5.之后一步一步的构造&#xff0c;先得到当前数据库名 利用database&#xff08;&#xff09; 再得到库里有哪些表 …

第6章 6.2.3 : readlines和writelines函数 (MATLAB入门课程)

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 在MATLAB的文本数据处理任务中&#xff0c;导入和导出文件是常…

Vue3学习01 Vue3核心语法

Vue3学习 1. Vue3新的特性 2. 创建Vue3工程2.1 基于 vue-cli 创建项目文件说明 2.2 基于 vite 创建具体操作项目文件说明 2.3 简单案例(vite) 3. Vue3核心语法3.1 OptionsAPI 与 CompositionAPIOptions API 弊端Composition API 优势 ⭐3.2 setup小案例setup返回值setup 与 Opt…

mac电脑安装软件报错:无法检查更新,请检查你的互联网连接

1、点菜单栏搜索图标&#xff0c;输入&#xff1a;终端 &#xff0c;找到后&#xff0c;点击打开 2、输入以下命令&#xff1a;&#xff08;复制粘贴进去&#xff09;回车安装 /usr/sbin/softwareupdate --install-rosetta --agree-to-license 3、提示【Install of Rosetta …

vue模版字符串解析成vue模版对象

模版字符串 this.code <template><div style"width:100% ; height: 100% ;">{{resultData[0].name}}</div> </template> <script> export default {data() {return {resultData: [{ name: 图幅, value: 20 },]}},mounted(){},method…

STM32-模数转化器

ADC(Analog-to-Digital Converter) 指模数转换器。是指将连续变化的模拟信号转换 为离散的数字信号的器件。 ADC相关参数说明&#xff1a; 分辨率&#xff1a; 分辨率以二进制&#xff08;或十进制&#xff09;数的位数来表示&#xff0c;一般有 8 位、10 位、12 位、16 位…

文件输入/输出流(I/O)

文章目录 前言一、文件输入\输出流是什么&#xff1f;二、使用方法 1.FileInputStream与FileOutputStream类2.FileReader与FileWriter类总结 前言 对于文章I/O(输入/输出流的概述)&#xff0c;有了下文。这篇文章将具体详细展述如何向磁盘文件中输入数据&#xff0c;或者读取磁…

【Android】apk安装报错:包含病毒: a.gray.BulimiaTGen.f

​ 有时候apk安装或者更新时&#xff0c;显示&#xff1a;[高风险]包含病毒: a.gray.BulimiaTGen.f这种bug&#xff1b; 原因&#xff1a;这是手机管家误报病毒。 处理方法&#xff1a;我看网上其他资料可以进行申诉&#xff0c;也可以进行apk加固&#xff0c;我这边尝试用360…

微信小程序制作圆形进度条

微信小程序制作圆形进度条 1. 建立文件夹 选择一个目录建立一个文件夹&#xff0c;比如 mycircle 吧&#xff0c;另外把对应 page 的相关文件都建立出来&#xff0c;包括 js&#xff0c;json&#xff0c;wxml 和 wxcc。 2. 开启元件属性 在 mycircle.json中开启 component 属…

数据结构与算法——字符串暴力匹配

一、字符串的组成 1.数据域&#xff0c;字符串的内容 2.字符串的长度 二、模式匹配-暴力匹配原理 1.两个字符串一个主串一个模式串用两个指针对其进行匹配 2、两个指针所对应的值相同时继续匹配下一个 3、当出现不匹配的情况时&#xff0c;回溯主串的指针到刚开始起点的下一个位…