python Flask中返回图片流给前端展示

一时失言乱红尘 2022-06-16 13:20 243阅读 0赞

场景需求：需要在Flask服务器的本地找一张图片返回给前端展示出来。

问题疑点：通常前端的<img>标签只会接受url的形式来展示图片，没试过在返回服务器本地的一张图片给前端。

因此写个记录一下这个看起来有点奇葩的场景（通常个人博客，个人网站没有钱用第三方的服务都会采用存储在服务器本地的方法啦。）

项目目录：

dyy\_project

|----static(新建flask项目时自动建的，没有任何文件)

|----templates

|-----index.html (前端页面)

|----dyy\_project.py (flask项目启动文件)

文件内容：dyy\_project.py

#!/usr/bin/env python
    # coding=utf-8
    
    from flask import Flask
    from flask import render_template
    
    app = Flask(__name__)
    
    """
    这是一个展示Flask如何读取服务器本地图片, 并返回图片流给前端显示的例子
    """
    
    
    def return_img_stream(img_local_path):
        """
        工具函数:
        获取本地图片流
        :param img_local_path:文件单张图片的本地绝对路径
        :return: 图片流
        """
        import base64
        img_stream = ''
        with open(img_local_path, 'r') as img_f:
            img_stream = img_f.read()
            img_stream = base64.b64encode(img_stream)
        return img_stream
    
    
    @app.route('/')
    def hello_world():
        img_path = '/home/hogan/Googlelogo.png'
        img_stream = return_img_stream(img_path)
        return render_template('index.html',
                               img_stream=img_stream)
    
    
    if __name__ == '__main__':
        app.run(debug=True, port=8080)

文件内容：index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Flask Show Image</title>
    </head>
    <body>
        <img style="width:180px" src="data:;base64,{
       { img_stream }}">
    </body>
    </html>

注意： 在img标签中的src一定要按照 data:;base64,\{ \{img\_stream\}\} 的形式添加，否则显示不出图片。

然后启动你的Flask程序，访问http://127.0.0.1:8080 你就可以看到你的图片了。