react项目登录使用验证码

人鱼小姐ww

已于 2024-08-29 13:57:01 修改

阅读量43

点赞数 1

文章标签： react.js 前端

于 2024-08-29 13:14:07 首次发布

本文链接：https://blog.csdn.net/weixin_42255789/article/details/141676175

版权

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>