后端传验证码图片前端ajax怎么显示图片

要在前端通过AJAX显示后端传送的验证码图片，你可以按照以下步骤操作：

1. 后端生成验证码图片并将其转换为Base64编码字符串。
2. 前端通过AJAX请求该Base64字符串，并将其设置为图片的src属性。

后端代码示例（假设使用Python的Flask框架）:

from flask import Flask, jsonify, make_response
import io
import base64
from PIL import Image, ImageFont, ImageDraw
 
app = Flask(__name__)
 
@app.route('/get_captcha')
def get_captcha():
    # 生成验证码
    image = Image.new('RGB', (100, 30), (255, 255, 255))
    font = ImageFont.truetype('Arial.ttf', 24)
    draw = ImageDraw.Draw(image)
    draw.text((10, 10), 'TEXT', font=font, fill=(0, 0, 0))
    
    # 将图片转换为Base64
    buffered = io.BytesIO()
    image.save(buffered, format="PNG")
    img_byte = buffered.getvalue()
    base64_img = base64.b64encode(img_byte).decode('utf-8')
    
    return jsonify({'captcha': base64_img})
 
if __name__ == '__main__':
    app.run(debug=True)

前端JavaScript代码示例（使用jQuery）:

$.ajax({
    url: '/get_captcha',
    type: 'GET',
    success: function(data) {
        // 将Base64字符串设置为图片的src
        $('#captcha_image').attr('src', 'data:image/png;base64,' + data.captcha);
    }
});

前端HTML代码示例:

<img id="captcha_image" src="" alt="Captcha">

确保你的AJAX调用是在文档加载完毕之后执行，或者在事件处理函数中进行。这样可以确保当设置图片src属性时，图片元素已经存在于DOM中。