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

作者：DHogan 时间：2023-12-01 06:58:23　

场景需求：需要在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 你就可以看到你的图片了。

来源：https://blog.csdn.net/dongyouyuan/article/details/72282906

标签：python,Flask,图片流,前端

投稿

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

猜你喜欢

解读HTML：大厦的基石

用javascript实现的汉字简繁转换功能

Python tkinter实现图片标注功能(完整代码)

MySQL两种临时表的用法详解

python DataFrame转dict字典过程详解

在go语言中安装与使用protobuf的方法详解

tensorflow模型文件(ckpt)转pb文件的方法（不知道输出节点名）

python中什么是面向对象

PyTorch搭建CNN实现风速预测

一个轻量级的XHTML右键菜单[支持IE和firefox]

javascript实现des解密加密全过程

python操作日期和时间的方法

对Python 语音识别框架详解

python getopt 参数处理小示例

pytorch 预训练模型读取修改相关参数的填坑问题

sql server建表时设置ID字段自增的简单方法

Asp操作Xml的精炼类,含示例代码

微信小程序（订阅消息）功能

微信小程序实现简单的select下拉框

python的等深分箱实例