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


Posted in Python onJanuary 09, 2020

场景需求:需要在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 相关文章推荐
Python算法应用实战之栈详解
Feb 04 Python
python微信跳一跳游戏辅助代码解析
Jan 29 Python
浅谈Python里面小数点精度的控制
Jul 16 Python
Pandas透视表(pivot_table)详解
Jul 22 Python
python tkinter基本属性详解
Sep 16 Python
关于Tensorflow使用CPU报错的解决方式
Feb 05 Python
Django使用Celery加redis执行异步任务的实例内容
Feb 20 Python
Python-jenkins 获取job构建信息方式
May 12 Python
通过实例简单了解python yield使用方法
Aug 06 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
Sep 05 Python
python实现扫雷游戏的示例
Oct 20 Python
Python词云的正确实现方法实例
May 08 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
Jan 09 #Python
python将图片转base64,实现前端显示
Jan 09 #Python
Python 解码Base64 得到码流格式文本实例
Jan 09 #Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
Jan 09 #Python
Python+OpenCV实现旋转文本校正方式
Jan 09 #Python
Python 实现OpenCV格式和PIL.Image格式互转
Jan 09 #Python
Python实现i人事自动打卡的示例代码
Jan 09 #Python
You might like
快速开发一个PHP扩展图文教程
2008/12/12 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python中time包实例详解
2021/02/02 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
2014国培学习感言
2014/03/05 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL