Flask模板引擎传递二进制图片时图片不显示的正确实现方式

你现在遇到的多余b'类无效字符，本质是Python3中base64.b64encode()返回的是bytes字节类型，而非可直接用于页面的字符串类型。模板渲染时会直接把bytes对象的Python原生表示形式（也就是b'内容'这种带类型标识的格式）输出到HTML里，后续再经过HTML实体转义，就变成了你看到的b'iVBOR...格式的内容，自然无法被浏览器识别为合法的data URI图片地址。

1. 后端代码修正 #

对base64编码结果做字符串解码，把bytes转成纯utf-8字符串再传给模板，核心改动就是在b64encode()调用后追加.decode("utf-8")：

• 适配你原有代码结构的基础改法

#!/usr/bin/python3
import base64
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def showdata():
    fp = open("sp.png","rb")
    # 关键修正：将bytes类型的base64内容解码为普通字符串
    sp = base64.b64encode(fp.read()).decode("utf-8")
    fp.close()

    fp = open("sg.png","rb")
    sg = base64.b64encode(fp.read()).decode("utf-8")
    fp.close()

    return render_template('index.html', sg=sg, sp=sp)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

• 更健壮的优化写法
  用Python上下文管理器替代手动open/close操作，避免文件流泄漏：

@app.route('/')
def showdata():
    with open("sp.png", "rb") as sp_file:
        sp = base64.b64encode(sp_file.read()).decode("utf-8")
    with open("sg.png", "rb") as sg_file:
        sg = base64.b64encode(sg_file.read()).decode("utf-8")
    return render_template('index.html', sg=sg, sp=sp)

注：你原代码中包裹的make_response在这里没有实际作用，render_template本身已经会生成合法的Flask响应对象，除非需要自定义响应头，否则不需要额外包裹。

2. 前端模板无需调整 #

你现有模板中的img标签写法完全符合data URI规范，后端代码修正后，渲染输出的src属性会自动变成data:image/png;base64,iVBORw0KGgo...的正常格式，浏览器可以直接解析显示，不需要改动模板内容。

小提示：base64标准字符集为A-Za-z0-9+/=，不会触发Flask/Jinja的HTML自动转义逻辑，不需要额外给模板变量加|safe过滤器，避免引入不必要的XSS风险。

内容的提问来源于stack exchange，提问作者Michael Hecht