移动端登录使用图片验证码,后台返回的事base64编码,返回格式如下:
{
"success":true,
"code":200,
"msg":"成功",
"data":{
"verificationCode":"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"
}
}
verificationCode字段就是图片的base64编码,绑定verificationCode字段。
<template>
<view>
<image class="code-img" :src="'data:image/png;base64,'+codeImgUrl"></image>
</view>
</template>
<script>
export default {
data() {
return {
codeImgUrl:'', //base64验证码图片地址
}
}
}
</script>
本文介绍了一种移动端登录时使用图片验证码的方法,后台通过HTTP响应返回Base64编码的验证码图片。在前端,将Base64字符串绑定到`<image>`标签的`src`属性上,实现图片的显示。示例代码展示了如何在Vue模板中加载Base64格式的验证码。
1213

被折叠的 条评论
为什么被折叠?



