python flask将读取的图片返回给web前端

最近在做毕业设计系统可视化的时候，分析框架选择了Python语言，但需要用前端来展示分析的结果，虽然考虑使用echarts图表来完成，对于简单的图表需要的数据格式简单，但是比如热力图所需的数据得自己去组装，Python后台画图很简单，一两句的事情，但是怎么把画好的图片放到html等前端显示呢，最近网上看了几个例子，但有些例子都没有达到正常显示图片，所以自己动手亲自试了一试。

原理：Python在后台把图片处理为Base64位的格式，再把Base64格式的图片在html用img控件显示。

补充：

flask页面中使用jinja2渲染引擎（使用真实值替换变量，再返回最终得到的字符串，这个过程称为“渲染”），在jinja2中，存在三种语法，有点类似springboot中thymeleaf的语法格式：
控制结构 ：{% %}
变量取值： {{ }}
注释 ：{# #}

Python主要代码：

from flask import Flask, jsonify, request, render_template
from flask_cors import CORS

app = Flask(__name__)  # 实例化，可视为固定格式
app.debug = True  # Flask内置了调试模式，可以自动重载代码并显示调试信息
app.config['JSON_AS_ASCII'] = False  # 解决flask接口中文数据编码问题

#设置可跨域范围
CORS(app, supports_credentials=True)

# 展示Flask如何读取服务器本地图片, 并返回图片流给前端显示的例子
def return_img_stream(img_local_path):
    """
    工具函数:
    获取本地图片流
    :param img_local_path:文件单张图片的本地绝对路径
    :return: 图片流
    """
    import base64
    img_stream = ''
    with open(img_local_path, 'rb') as img_f:
        img_stream = img_f.read()
        img_stream = base64.b64encode(img_stream).decode()
    return img_stream

// 跳转到html页面显示图片   app.route()为跳转路由，类似springboot
@app.route('/index')
def hello_world():
  img_path = 'static/img/demo.png'
  img_stream = return_img_stream(img_path)
  # render_template()函数是flask函数，它从模版文件夹templates中呈现给定的模板上下文。
  return render_template('index.html',img_stream=img_stream)
  
  // 主函数
if __name__ == '__main__':
    # app.run(host, port, debug, options)
    # 默认值：host="127.0.0.1", port=5000, debug=False
    app.run(host="127.0.0.1", port=5010)

html代码：

启动flask程序后，在网页地址栏输入地址访问。

避坑，网上有许多例子是这样的：

1、open(img_local_path, 'r') ，这样不会显示图片，正确的为：open(img_local_path, 'rb')
2、然后最关键的是：将这句base64.b64encode(img_stream)后加上.decode()，作用是把格式转为字符串。