Python 显示来自flask的图像将_文件（ajax响应）发送到图像标记中

如何显示flask send_file ajax响应中的图像

HTML文件

---

---

如果要使用字节来绘制图像，应将

base64

添加到src标记中

document.getElementById（'frame'）.src='data:image/jpg；base64，“+结果；

必须将图像数据编码为base64，并将其添加到dom中的图像元素中

我在repl.it中创建了一个示例应用程序：

下面是一个示例烧瓶应用程序：

from flask import Flask, render_template, make_response
import base64
app = Flask('app')

@app.route('/')
def hello_world():
  return render_template('image.html')


@app.route('/capture')
def capture_api():
  with open("house-thumbs-up.gif", "rb") as f:
    image_binary = f.read()

    response = make_response(base64.b64encode(image_binary))
    response.headers.set('Content-Type', 'image/gif')
    response.headers.set('Content-Disposition', 'attachment', filename='image.gif')
    return response

app.run(host='0.0.0.0', port=8080)

以及相应的HTML模板：

<img id="image">

<button class="button" id="start">Start</button>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"     integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  let button = document.getElementById("start")
  button.addEventListener('click', () => {
    $.ajax({
        url: 'https://luminoustwincase--five-nine.repl.co/capture',
        type: 'GET',
        contentType: "image/jpg",
        success: function(result) {
          document.getElementById('image').src = 'data:image/gif;base64,' + result;
        }
    });
  });
</script> 

let button=document.getElementById（“开始”）
按钮。addEventListener（'单击'，（）=>{
$.ajax({
网址：'https://luminoustwincase--five-nine.repl.co/capture',
键入：“GET”，
contentType:“图像/jpg”，
成功：功能（结果）{
document.getElementById（'image'）.src='data:image/gif；base64'，+结果；
}
});
});

问题在于后端和前端的编码

烧瓶

image = b64encode(image_binary).decode("utf-8")
return jsonify({'status': True, 'image': image})

html

document.getElementById('frame').src = 'data:;base64,' + result['image'];

image = b64encode(image_binary).decode("utf-8")
return jsonify({'status': True, 'image': image})

document.getElementById('frame').src = 'data:;base64,' + result['image'];