python 实现Flask中返回图片流给前端展示
2020-02-13 10:06
1681 查看
场景需求:需要在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 你就可以看到你的图片了。
以上这篇python 实现Flask中返回图片流给前端展示就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- python Flask中返回图片流给前端展示
- flask+layui+echarts实现前端动态图展示数据
- 【python学习笔记】flask实现简单的接收json返回json的接口
- python实现通过flask和前端进行数据收发
- Flask框架实现的前端RSA加密与后端Python解密功能详解
- 【Python】【Flask】前端调用后端方法返回页面
- 利用python+flask实现股票查询与结果网页展示
- flask+layui+echarts实现前端动态图展示数据效果
- python里怎么实现多个协程一起执行,只要完成一个就返回一个协程
- java实现解析Excel并以List方式返回前端
- Python Flask学习_使用flask-login实现认证蓝本(一)
- Python的Flask框架及Nginx实现静态文件访问限制功能
- 用python3 返回鼠标位置的实现方法(带界面)
- flask + Python3 实现的的API自动化测试平台---- IAPTest接口测试平台
- 使用python的Flask实现一个RESTful API服务器端[翻译]
- Python实现CART,并且展示混淆矩阵
- JSON格式返回给前端的数据展示选择
- Web前端开发,利用HTML5 Canvas实现监控系统页面展示
- python入门篇1:基于flask的留言板网站实现
- python(通过flask实现一个http接口)调用这个接口实现第三方smtp发送邮件