图形验证码不显示是什么原因

Question

为什么图形验证码不显示呢，在线转base64图片可以显示说明后端返回的没有问题

<div class="Pop-ups-code">
                    <input type="text" placeholder="请输入图形验证码" maxlength="4" v-model="captcha"/>
                    <button class="sendcode" @click="drawing"><img :src="captchaImage" alt="验证码"></button>
                </div>

data: function() {
        return {
            captcha:'',
            customphone:'',
            img_id:'',
            captchaImage:'',
        }
    },
drawing() {
            $.ajax({
                url: commonUrl + 'creat/code',
                type: 'post',
                data: JSON.stringify({
                    // 'cellphone_number': this.customphone, //手机号
                    'cellphone_number': 15132335754, //手机号
                }),
                dataType: 'json',
                contentType: 'application/json',
                success: (res) =>  {
                    console.log('成功了吗');
                    if (res.result_code == '0') {
                        console.log('图形验证码',res.data.img);
                        this.captchaImage ='data:image/png;base64,' + res.data.img;
                        this.img_id = res.data.img_id;
                    }else{
                        layer.open({
                            content: '失败：'+res.result_message,
                            skin: 'msg',
                            time: 2 //2秒后自动关闭
                        });
                    }
                    
                }
            })
          },

Answer 1

引自免费微信小程序：皆我百晓生

从你的问题描述和图2返回的数据内容来看，图形验证码不显示的可能原因主要包括：

1. 后端返回的数据问题：虽然后端返回了验证码的图片信息（base64编码），但有可能存在格式错误或者数据不完整的问题。你需要确保后端返回的确实是正确的base64编码的图片数据。此外，返回的数据中可能还需要包含其他信息，例如验证码的ID（img_id），用于前端验证。
2. 前端代码逻辑问题：你的前端代码逻辑可能存在一些问题。首先，确保$.ajax()请求的URL路径和参数正确无误，并且可以成功获取到后端返回的数据。其次，在成功获取到数据后，你需要确保正确地将验证码图片数据赋值给captchaImage变量，并且更新到<img>标签的src属性上。你的代码中已经做了这一步，但你需要确保this.captchaImage确实被赋值了正确的值。
3. 网络问题或服务器响应问题：如果你的网络存在问题或者服务器响应有问题，也可能导致验证码无法正确显示。你可以检查网络状态，并确保服务器正常运行并且能够正确返回验证码数据。

为了解决这个问题，你可以尝试以下步骤：

• 检查后端返回的验证码数据是否正确和完整。你可以直接在浏览器中打开返回的URL或者尝试手动解析base64编码的图片数据，看是否能够正确显示图片。
• 检查前端代码逻辑，确保能够正确获取和处理后端返回的数据。你可以在获取数据后打印出this.captchaImage的值，看看是否赋值正确。
• 确保网络状态良好，并且服务器能够正常响应请求。你可以尝试在不同的网络环境下测试你的代码，看看问题是否仍然存在。

如果以上步骤都无法解决问题，你可能需要进一步检查你的代码和服务器设置，或者联系后端开发人员协助解决。另外，如果后端返回的验证码数据包含敏感信息（如随机生成的字符串），请确保前端代码的安全性，避免敏感信息泄露。