react项目登录使用验证码

news2024/9/25 23:25:56

react项目登录使用验证码

在这里插入图片描述

imgSrc 的格式是base64

<Row style={{ width: 350 }}>
                    <Col>
                      <Form.Item
                        name="verifyCode"
                        rules={[
                          {
                            required: false,
                            message: "请输入验证码!",
                          },
                        ]}
                      >
                        <Input
                          style={{ width: 213, height: 50 }}
                          placeholder="请输入验证码"
                          allowClear
                        />
                      </Form.Item>
                    </Col>
                    <Col
                      style={{
                      display: "flex",
                      flexDirection: "column",
                      justifyContent: "center",
                    }}>
                      { this.state.imgSrc ? (
                        // eslint-disable-next-line jsx-a11y/alt-text
                        <img
                          className="login-form-code"
                          id="img"
                          src={this.state.imgSrc ? `data:image/gif;base64,${this.state.imgSrc}` : ""}
                          style={{ width: 105, height: 49, marginTop: -22, marginLeft: 10 }}
                          onClick={() => {
                            this.getCode();
                          }}
                        />
                      ) : (
                        <SyncOutlined
                          spin
                          style={{
                            marginLeft: 10,
                            marginTop: -10,
                            width: 80,
                            color: "#11B234",
                          }}
                        />
                      )}
                    </Col>
                  </Row>

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

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

相关文章

精准操控,稳如磐石:飞控+综控系统仿真揭秘

1.背景 现代飞行器系统中&#xff0c;飞行控制系统和综合控制系统的协同工作是实现精准打击和高度可靠性的关键。 飞行控制系统简称飞控系统&#xff0c;负责飞行器的飞行控制和姿态调整&#xff0c;确保飞行器在飞行过程中维持稳定和精确的轨迹。其主要进行姿态控制、轨迹调…

Redis缓存穿透、缓存击穿与缓存雪崩的详细讲解和案例示范

在高并发的电商交易系统中&#xff0c;Redis缓存的使用可以极大地提高系统的性能。然而&#xff0c;缓存机制也面临着一些挑战&#xff0c;尤其是缓存穿透、缓存击穿和缓存雪崩问题。这些问题如果处理不当&#xff0c;可能导致系统的性能大幅下降&#xff0c;甚至出现系统崩溃的…

【Qt】Spacer

Spacer 在使用布局管理的时候&#xff0c;如果需要在控件之间添加一段空白&#xff0c;就可以使用QSpacerItem来表示。 核心属性 属性说明 width 宽度 height ⾼度 hData ⽔平⽅向的 sizePolicy QSizePolicy::Ignored : 忽略控件的尺⼨&#xff0c;不对布局产⽣影响。 QS…

找搭子神器有哪些?盘点找搭子软件排行榜前十名

现在找搭子文化越来越流行&#xff0c;主打一个“恰到好处的陪伴”&#xff0c;深受年轻人喜爱。以下是一些值得推荐的找搭子软件&#xff1a; 1. 咕哇小程序&#xff1a;特点&#xff1a;这是一个实名制的找搭子交友平台&#xff0c;因此相对较为纯粹&#xff0c;骗子较少。用…

【FreeRTOS】使用互斥量解决优先级反转

目录 0 前言0 引言1 互斥量_领导临时提拔你(解决优先级反转)2 怎么使用互斥量3 bug4 总结 0 前言 学习视频&#xff1a; 【FreeRTOS入门与工程实践 --由浅入深带你学习FreeRTOS&#xff08;FreeRTOS教程 基于STM32&#xff0c;以实际项目为导向&#xff09;】 【精准空降到 08:…

什么是无效营养?无效营养对健康和身材的影响

在追求健康饮食和匀称身材的道路上&#xff0c;我们往往被各种营养概念包围&#xff0c;一不小心就会陷入“无效营养”的陷阱。那么&#xff0c;什么是无效营养&#xff1f;简单来说&#xff0c;无效营养‌&#xff1a;指的是摄入的营养物质不能被身体利用&#xff0c;或者摄入…

数据库与缓存一致性的解决方案

数据库和缓存的数据一致性问题一直是老生常谈的话题了&#xff0c;它不仅在面试中十分常见&#xff0c;而且在实际开发中也是需要加以考量的因素。借着难得的空暇时光&#xff08;其实是晚上不太想写代码&#xff09;&#xff0c;笔者今天想和大家简单讨论一下&#xff0c;数据…

Vue实现步骤条(el-step)+Popover弹出框

1、实现效果 hover到每一个步骤条上时&#xff0c;如果当前有未完成情况&#xff08;unFinishedMe不为空&#xff09;&#xff0c;就使用popover显示出来&#xff0c;如果没有hover时就不显示 2、实现思路 循环app信息列表显示多个进度条 使用el-steps 循环步骤列表&#xf…

LeetCode的高频SQL50题(基础版)学习笔记

题目在此网站 https://leetcode.cn/ 查询 # Write your MySQL query statement below select product_id from products where low_fats like Y and recyclable like Y;# Write your MySQL query statement below select name from customer where referee_id !2 or referee_i…

Java笔试面试题AI答之面向对象(7)

文章目录 37. Java成员变量与局部变量的区别有哪些?38. Java 创建一个对象用什么运算符? 对象实体与对象引用有何不同?对象实体与对象引用的不同示例 39. 类的构造方法的作用是什么? 若一个类没有声明构造方法&#xff0c;该程序能正确执行吗? 为什么?40. Java构造方法有…

服了!DELETE 同一行记录也会造成死锁---图文解析

服了&#xff01;DELETE 同一行记录也会造成死锁&#xff01;&#xff01; 作者&#xff1a;转转技术团队 链接&#xff1a;https://juejin.cn/post/7387227689319563290 来源&#xff1a;稀土掘金 MySQL 锁回顾 共享锁 使用共享锁&#xff08;Shared Lock&#xff09;时&am…

模糊视频一键变清晰,从此告别模糊不清的画质

话不多说&#xff0c;咱们直入主题。你是不是有比较模糊的视频&#xff0c;比如老视频&#xff0c;老电影和监控视频&#xff0c;对了&#xff0c;还有日本土特产&#xff08;懂的都懂&#xff09;&#xff0c;模糊的视频看起是不是很不舒服&#xff0c;长期久了还会影响视力影…

这些可视化Python库非常强!

介绍的大体流程是&#xff1a;库名、类型、github star、功能、使用方法、案例、学习资料。 第一部分&#xff1a;数据可视化 pyecharts 类型&#xff1a;可视化图表设计 GitHub Star &#xff1a;5985 功能&#xff1a; 简洁的 API 设计&#xff0c;使用如丝滑般流畅&am…

LLM(二):Prompt

一&#xff0c;什么是Prompt 在人工智能领域&#xff0c;Prompt指的是用户给大型语言模型发出的指令。作用是引导模型生成符合预期主题或内容的文本&#xff0c;从而控制生成结果的方向和内容。 大模型是根据用户提出的问题来输出下文&#xff0c;所以用户提出的问题的质量也…

三种智能指针

智能指针 new和delete 1:new初始化 new未初始化值 int *p new int;//p值未定义string *str new string;//为空串&#xff0c;调用string默认构造函数new 初始化值 int *p new int(100);string *str new string(6,a);//aaaaaavector类型指针 vector<int> *p new v…

pikepdf:一个实用的PDF文件处理Python库

我是东哥&#xff0c;今天给大家介绍一个实用的Python库——pikepdf&#xff0c;它能让你像操作文本文件一样轻松地处理PDF&#xff0c;无论是读取、修改还是保存&#xff0c;都能迎刃而解。 基本介绍 pikepdf是一个基于Python的库&#xff0c;它允许开发者轻松地读取、写入和…

第四课,接收键盘输入

一&#xff0c;关于基本框架中头文件的作用 头文件就是一个工具箱&#xff0c;C中有很多工具&#xff0c;我们最熟悉的cout就是其中之一 引入头文件&#xff1a;如果你想在你的代码中使用工具箱里的工具&#xff0c;C会很大方的让你用&#xff0c;但前提是你必须在本页代码的最…

为什么 CNC 加工会产生毛刺?

在现代机械加工领域&#xff0c;CNC(计算机数控)加工以其高精度、高效率的特点被广泛应用。然而&#xff0c;在 CNC 加工过程中&#xff0c;毛刺的产生常常是一个令人困扰的问题。时利和将解析为什么 CNC 加工会产生毛刺呢? 一、刀具磨损 刀具在长时间的使用过程中会逐渐磨损。…

如何一步快速去除黑神话悟空图片上的文字?一招教会你

设计师朋友们&#xff0c;如果老板让你用去除海报上的文字&#xff0c;你会怎么做&#xff1f; 用PS的内容识别填充&#xff0c;图片就会变模糊再精修简直太麻烦啦&#xff01; 还好我最近找到一个图片处理神器&#xff0c;一键就能P去图片的文字&#xff01;简单又高效&…

day04-面向对象-常用API时间Arrays

一、常用API 1.1 StringBuilder类 StringBuilder类代表可变的字符串对象&#xff0c;理解为一个操作字符串的容器相对于String来说,比本来的操作效率更高 ​ StringBuilder常用方法public StringBuilder(): 构建一个空的可变字符串对象public StringBuilder(String str): 构建…