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

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

一、直接在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()}`
}

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

  <imgid="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.mzph.cn/diannao/49957.shtml

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

相关文章

通过 WSL 2 在Windows 上挂载 Linux 磁盘

原文查看 曾为了传输或者共享不同系统的文件频繁地在 Windows 和 Linux 系统之间切换&#xff0c;效率过低&#xff0c;所以尝试通过 WSL 2 在Windows 上挂载 Linux 磁盘。 先决条件 需要在Windows 10 2004 及更高版本&#xff08;Build 19041 及更高版本&#xff09;或 Win…

基础复习(集合)

集合 Collection单列集合 1.特点 2.常用方法&#xff08;Collection都可用&#xff09; 遍历方式 迭代器遍历 Iterator<String> it c.iterator();//此处c是之前定义好的集合//第二步&#xff1a;用于判断当前位置是否有元素可以获取 //解释&#xff1a;hasNext()方…

OWS开放式耳机真的火了:漫步者、悠律、小米开放式耳机各具特点

开放式真无线耳机作为的蓝牙耳机二级分类&#xff0c;在近几年的发展趋势可以说超乎了所有人的想象。 2024 年第一季度中国线上蓝牙耳机销量达到 1757 万副,同比增长 15%,其中开放式耳机市场份额达到 14.4%,较去年同期增长 7.7%,销量同比大幅增长 148%&#xff0c;是整体耳机市…

CMakeList学习笔记

设置项目&#xff1a;project project(planning VERSION 1.0.0 LANGUAGES CXX) # 项目的名字 版本 1.1.0 编程语言 CXX 设置包含目录&#xff1a;include_directories、targer_include_directories 设置编译类型&#xff1a;add_executable、add_library add_executable(demo d…

Mysql中(基于GTID方式)实现主从复制,单主复制详细教程

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️创作…

精密电路设计中的高精电阻:分流电阻

精密电路设计要求电路元件具有极高的精度和稳定性。在这些设计中&#xff0c;分流电阻扮演着至关重要的角色。本文将探讨分流电阻的基本原理、选择标准、应用场景以及在现代精密电路设计中的重要性。 在电子测量和控制领域&#xff0c;电流的精确测量是实现电路精确控制的关键。…

FPGA:3-8译码器的设计

1、什么是3-8译码器&#xff1f; 3-8译码器&#xff0c;顾名思义&#xff0c;三个输入&#xff0c;八个输出&#xff0c;构成3-8译码器。根据二进制特性&#xff0c;三位二进制数有八种可能&#xff0c;对应的真值表如下所示(该译码器输出低电平有效)&#xff1a; 3-8译码器(…

关于使用宝兰德bes中间件进行windows部署遇到的问题——license不存在

报错信息 日志文件中是这么报错的 遇到的具体情况&#xff1a; 实例按照**的文档手册正常步骤下去节点部署的时候没有报错&#xff0c;成功启动&#xff0c;但是日志里会有报错信息&#xff0c;也是license不存在实例创建的时候失败了&#xff0c;报错信息如下所示 解决方法…

Fork软件笔记:一键拉取仓库所有模块

Fork是一个好用的git工具&#xff0c;只是没有中文而已&#xff08;不过不用翻译也能看使用&#xff09;。 工具下载地址&#xff1a;https://fork.dev/ 界面展示&#xff1a; 当项目中仓库模块比较多时&#xff0c;可以看到每个模块都是一个分页&#xff0c;每一个都要手动切换…

ML.NET:一个.NET开源、免费、跨平台的机器学习框架

前言 今天大姚给大家分享一个.NET开源、免费、跨平台&#xff08;支持Windows、Linux、macOS多个操作系统&#xff09;的机器学习框架&#xff1a;ML.NET。并且本文将会带你快速使用ML.NET训练一个属于自己的图像分类模型&#xff0c;对图像进行分类。 ML.NET框架介绍 ML.NET…

ubuntu一些好用的开发工具及其配置

1 终端模糊搜索fzf https://github.com/junegunn/fzf 输入某命令&#xff0c;比如 conda &#xff0c;按下ctrlR&#xff0c;会显示和该命令匹配的历史命令的列表 有了这个工具再也不用记忆太复杂的命令&#xff0c;只需要知道大概几个单词&#xff0c;输入即可搜索。 其搜索…

IP地址专用SSL证书申请指南——六步完成

IP地址SSL证书是一种专门设计用于IP地址的SSL/TLS证书&#xff0c;部署IP地址SSL证书可以实现IP地址HTTPS加密。 一&#xff1a;前提条件 1&#xff1b;申请IP地址SSL证书,必须拥有这个IP地址的管理权限 2&#xff1b;非内网IP&#xff0c;以下是常见的内网IP字段 10.0.0.0…

计算机网络知识点总结————物理层

前言 一、物理层的基本概念 物理层解决什么问题 物理层的主要特性 二、传输媒体 导引型传输媒体 同轴电缆 双绞线 光纤 非导引型传输媒体 三、数据通信的基础知识 1.术语 2.编码方式 总结 前言 我站在清醒和麻木的边缘&#xff0c;不能堕落也不能解脱 一、物理层的…

鸿蒙OpenHarmony Native API【raw_dir.h与raw_file.h】 头文件

raw_dir.h Overview Related Modules: [Rawfile] Description: 提供rawfile目录相关功能 功能包括遍历和关闭rawfile目录 Since: 8 Version: 1.0 Summary Typedefs Typedef NameDescription[RawDir]typedef struct [RawDir] 提供对rawfile目录的访问 Functions Fun…

算法-KMP字符串匹配

题目一 解题思路 KMP算法详解 详解next数组 next[i] 就是使子串 s[0…i] 有最长相等前后缀的前缀的最后一位的下标。 总体来说解next数组和模板串匹配的过程很相似&#xff0c;触类旁通 代码模板 #include<iostream> using namespace std; const int N1e510; char …

AI绘画入门实践 | Midjourney:使用 --ar 控制图片宽高比

参数 Aspect ratio&#xff0c;缩写为 --ar&#xff0c;作用是设置生成图像的宽高比。 使用格式&#xff1a;--ar 宽:高 futuristic portrait of a beautiful human-droid hybrid woman --ar 16:9 futuristic portrait of a beautiful human-droid hybrid woman --ar 9:16 你也…

使用axios请求后端的上传图片接口

安装axios npm install axios 创建input文件上传标签 <input type"file" name"" id"" change"handleChange" /> 使用axios请求后端的图片上传接口 function handleChange(val) {// new FormData() js内置构造函数&#xff0c…

力扣高频SQL 50 题(基础版)第一题

文章目录 力扣高频SQL 50 题&#xff08;基础版&#xff09;第一题1757.可回收且低脂的产品题目说明思路分析实现过程准备数据&#xff1a;实现方式&#xff1a;结果截图&#xff1a; 力扣高频SQL 50 题&#xff08;基础版&#xff09;第一题 1757.可回收且低脂的产品 题目说…

面试常考Linux指令

文件权限 操作系统中每个文件都拥有特定的权限、所属用户和所属组。权限是操作系统用来限制资源访问的机制&#xff0c;在 Linux 中权限一般分为读(readable)、写(writable)和执行(executable)&#xff0c;分为三组。分别对应文件的属主(owner)&#xff0c;属组(group)和其他用…

PostgreSQL的学习心得和知识总结(一百四十九)|psql 的使用技巧:设置、预设、回显和已保存的查询

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…