获取后端返回的图形验证码

news2024/9/17 7:32:16

如果后端返回的直接就是一个图形,有以下几种方式展示
在这里插入图片描述

一、直接在img标签里面的src里面调用接口

<img :src="dialogSrc" class="photo" alt="验证码图片" @click="changeDialog">
let orgUrl = "/api/captcha"  //你的接口地址
let dialogSrc = ref(orgUrl); //为啥不直接用orgUrl,是因为下面那个方法加上一个随机数
//点击图片刷新验证码
const changeDialog = () => {
    dialogSrc.value = `${orgUrl}?${Math.random()}`
}

二、把二进制流转换为图片

  <img
   id="kaptcha_img"
   src=""
   alt="验证码图片"
   class="photo"
   @click="getKaptcha"
   />
   getKaptcha().then((res) => {  //接口地址返回
        let kaptcha_img = document.getElementById("kaptcha_img");
        let imageType = res.headers["content-type"];  //获取图片的格式
        const blob = new Blob([res.data], { type: imageType });
        const imageUrl = URL.createObjectURL(blob);
        kaptcha_img.src = imageUrl;
        kaptcha_img.onload = () => {
          URL.revokeObjectURL(imageUrl); //释放URL.createObjectURL()创建的对象
        };
      });

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

论文解读:DiAD之SG网络

目录 一、SG网络功能介绍二、SG网络代码实现 一、SG网络功能介绍 DiAD论文最主要的创新点就是使用SG网络解决多类别异常检测中的语义信息丢失问题&#xff0c;那么它是怎么实现的保留原始图像语义信息的同时重建异常区域&#xff1f; 与稳定扩散去噪网络的连接&#xff1a; S…

机器学习(二十):偏差和方差问题

一、判断偏差和方差 以多项式回归为例&#xff0c;红点为训练集数据&#xff0c;绿点为交叉验证数据。 下图的模型&#xff0c;训练集误差大&#xff0c;交叉验证集误差大&#xff0c;这代表偏差很大 下图的模型&#xff0c;训练集误差小&#xff0c;交叉验证集误差小&#x…

Linux网络:传输层协议TCP(二)三次挥手四次握手详解

目录 一、TCP的连接管理机制 1.1三次握手 1.2四次挥手 二、理解 TIME_WAIT 状态 2.1解决TIME_WAIT 状态引起的 bind 失败的方法 三、理解CLOSE_WAIT状态 一、TCP的连接管理机制 在正常情况下, TCP 要经过三次握手建立连接, 四次挥手断开连接 1.1三次握手 三次握手顾名思…

vue import from

vue import from 导入文件&#xff0c;从XXXX路径&#xff1b;引入文件 import xxxx from “./minins/resize” import xxxx from “./minins/resize.js” vue.config.js 定义 : resolve(src)&#xff1b;就是指src 目录 import xxxx from “/utils/auth” im…

vue3知识

目录 基础vue开发前的准备vue项目目录结构模板语法属性绑定条件渲染列表渲染通过key管理状态事件处理事件传参事件修饰符数组变化侦测计算属性Class绑定style绑定侦听器表单输入绑定模板引用组件组成组件嵌套关系组件注册方式组件传递数据Props(父传子)组件传递多种数据类型组件…

怎么批量加密U盘?U盘批量加密的方法有哪些?

加密U盘是保护U盘数据安全的重要方法。而当需要加密的U盘数量较多时&#xff0c;我们需要批量加密U盘。那么&#xff0c;U盘怎么批量加密呢&#xff1f;下面我们就来了解一下。 U盘内存卡批量只读加密专家 U盘内存卡批量只读加密专家是一款专业的U盘加密软件&#xff0c;适用于…

什么牌子的充电宝又好又耐用?认准这几个充电宝品牌!错过就吃亏

在 2024 年&#xff0c;充电宝已然成为我们生活中不可或缺的电子配件。但面对市场上琳琅满目的充电宝产品&#xff0c;如何挑选出一款适合自己的&#xff0c;却让许多人感到困惑。充电宝要怎么挑&#xff1f;这可不是一个简单的问题。不同的使用场景、不同的设备需求&#xff0…

02 MySQL数据库管理

目录 1.数据库的结构 sql语言主要由以下几部分组成 2. 数据库与表的创建和管理 1&#xff0c;创建数据库 2&#xff0c;创建表并添加数据 3&#xff0c;添加一条数据 4&#xff0c;查询数据 5&#xff0c;更新数据 6&#xff0c;删除数据 3.用户权限管理 1.创建用户 …

3万多有分类的成语词典ACCESS\EXCEL数据库

今天最后发一个成语词典的数据库了&#xff0c;因为成语词典的数据库太多了导致我自己都有些糊涂了&#xff0c;今天这份数据库应该说是最好的成语词典了&#xff0c;不但包含了3级分类&#xff0c;而且还有级别&#xff08;不要太较真&#xff09;字段。 数据库包含多个表&…

利用 Databend 生态构建现代数据湖工作流

数据是洞察力的基石&#xff0c;越来越多的企业开始建设以数据资产为中心的存储和分析一体化方案&#xff0c;这要求 Data Infra 架构能够提供可扩展、灵活且统一的数据工作流。现代数据湖架构同时兼顾数据湖的可扩展性和数据仓库的性能&#xff0c;满足对大规模数据处理的需求…

视频文件怎么压缩到最小 视频文件怎么压缩到最小内存 4个简单的方法工具分享简单步骤

如何压缩大视频文件以减小其大小&#xff1f;在分享或存储大视频文件时&#xff0c;有效压缩是关键&#xff0c;以降低文件大小且不显著牺牲视觉和听觉质量。视频文件的大小直接影响传输、分享和存储的成本与便捷性。掌握压缩视频的技能对于数字内容处理至关重要&#xff0c;能…

【Android】linux

android系统就是跑在linux上的系统。Linux层里面包含系统和硬件驱动等一些本地代码的环境。 linux的目录 mount: 用于查看哪个模块输入只读&#xff0c;一般显示为&#xff1a; [rootlocalhost ~]# mount /dev/cciss/c0d0p2 on / type ext3 (rw) proc on /proc type proc (…

SpringBoot 实现图形验证码

一、最终结果展示 二、前端代码 2.1 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle;}#verifica…

(leetcode学习)236. 二叉树的最近公共祖先

给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它自己的祖…

Q238. 除自身以外数组的乘积

思路 一开始想到的是按位乘 看了题解&#xff0c;思路是存i左边的乘积和 与 i右边的乘积和 代码一&#xff1a; 需要三次循环,需要额外空间 left和right数组 代码&#xff1a; public int[] productExceptSelf(int[] nums) {int[] left new int[nums.length];int[] right …

python题解

空间三角形 输入在三维空间的三角形三个顶点A&#xff0c;B&#xff0c;C的坐标&#xff08;x,y,z&#xff09;&#xff0c;计算并输出三角形面积。不考虑不能构成三角形的特殊情况。 格式 输入格式&#xff1a; 依次输入三个顶点A&#xff0c;B&#xff0c;C的坐标&#xff…

CISSP,信息安全圈公认的高含金量证书

在数字化和信息化迅速发展的时代&#xff0c;信息安全的重要性愈发突出。 网络攻击、数据泄露和隐私问题频发&#xff0c;使得企业和组织对信息安全专业人士的需求不断增加。 CISSP&#xff08;Certified Information Systems Security Professional&#xff09;作为信息安全领…

文字描边效果

文字描边效果可以通过text-shadow来实现&#xff0c;也可以通过-webkit-text-stroke来实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, i…

MySQL数据库练习(5)

1.建库建表 # 使用数据库 use mydb16_trigger;# 表格goods create table goods( gid char(8) primary key, name varchar(10), price decimal(8,2), num int);# 表格orders create table orders( oid int primary key auto_increment, gid char(10) not null, name varchar(10…

MYSQL第五次作业

1、触发器 建立两个表:goods(商品表)、orders(订单表) mysql> use mydb16_trigger; Database changed mysql> create table goods-> (-> gid char(8) primary key,-> name varchar(10),-> price decimal(8,2),-> num int-> ); Query O…