python+vue图片验证码无法显示问题

Question

我现在想完成一个后端产生一个图片验证码，传递到前端点击刷新的功能，但现在我的后端可以生成，访问http://127.0.0.1:5000/static/captchaImg.jpeg在前端页面可以得到图片验证码，但现在前端页面没有办法显示，是什么原因呢？

from PIL import Image, ImageDraw, ImageFont
import random
from flask import Flask, jsonify, url_for
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('static/captchaImg.jpeg')
    captcha_image_url = url_for('static', filename='captchaImg.jpeg')
    print(captcha_image_url)
    return jsonify({'captcha_image_url': captcha_image_url})

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

前端部分代码：

```html
 <el-form-item>
          <img :src="this.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')
        .then(response => {
          const captchaImg = response.data.captcha_image_url;
          console.log(captchaImg)
          this.captchaImg = captchaImg;
          console.log(this.captchaImg)
        });
    },

```

Answer 1

这儿多加了个this