图片验证码python+vue前后端传递

Question

我现在想实现一个登陆页面的图片验证码并且可以点击图片进行刷新的功能，后端python代码生成了一个图片验证码，但现在无法传递到前台，前台页面没有显示，不知道我的代码哪里出错了？

from PIL import Image, ImageDraw, ImageFont
import random
from flask import Flask, send_file
from flask_cors import CORS


# 生成随机的验证码文本
def generate_code(length):
    code = ''
    characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890'
    for _ in range(length):
        code += random.choice(characters)
    return code


# 生成带干扰线的验证码图片
def generate_captcha(code):
    width, height = 200, 100
    image = Image.new('RGB', (width, height), (255, 255, 255))
    draw = ImageDraw.Draw(image)

    # 绘制干扰线
    for _ in range(5):
        x1 = random.randint(0, width)
        y1 = random.randint(0, height)
        x2 = random.randint(0, width)
        y2 = random.randint(0, height)
        draw.line([(x1, y1), (x2, y2)], fill='black', width=2)

    # 设置字体
    font = ImageFont.truetype('arial.ttf',40)

    # 绘制验证码文本
    bbox= draw.textbbox((0,0), code, font=font)
    text_width=bbox[2]-bbox[0]
    text_height=bbox[3]-bbox[1]
    x = (width - text_width)/2
    y = (height - text_height)/2
    draw.text((x, y), code, font=font, fill='black')

    return image


app = Flask(__name__)
CORS(app)

@app.route('/get_captcha',methods=['GET'])
def get_captcha():
    code = generate_code(4)
    image = generate_captcha(code)
    image.save('captchaImg.jpeg')
    return send_file('captchaImg.jpeg', mimetype='image/jpeg')


if __name__ == '__main__':
    app.run()

前端部分代码：

<el-form-item>
          <img :src="captchaImg" @click="refreshCaptcha" alt="验证码" />
          <el-input type="text" v-model="captcha" placeholder="请输入验证码">
          </el-input>
        </el-form-item>

   refreshCaptcha() {
      // 向后端请求获取验证码图片
      axios
        .get("http://127.0.0.1:5000/get_captcha", {responseType: "arraybuffer",}).then((response) => {
          const imgData = btoa(
            new Uint8Array(response.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ''
            )
          );
          this.captchaImg=`data:image/jpeg;base64,${imgData}`;
          });
        }

Answer 1

浏览器 network里 这个接口能通吗？可以的话，如果你返回的图片路径没问题，那可能是前端 的路径不对