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>