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网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
Apr 25 Python
python连接oracle数据库实例
Oct 17 Python
python3抓取中文网页的方法
Jul 28 Python
简单学习Python time模块
Apr 29 Python
让Python更加充分的使用Sqlite3
Dec 11 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
Jan 17 Python
教你利用Python玩转histogram直方图的五种方法
Jul 30 Python
python傅里叶变换FFT绘制频谱图
Jul 19 Python
Python 如何优雅的将数字转化为时间格式的方法
Sep 26 Python
python numpy数组中的复制知识解析
Feb 03 Python
Python关于拓扑排序知识点讲解
Jan 04 Python
Python3中PyQt5简单实现文件打开及保存
Jun 10 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常用image图像函数集
2013/06/24 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python字符串查找函数的用法详解
2019/07/08 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
在校学生职业规划范文
2014/01/08 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
优秀团支部申报材料
2014/12/26 职场文书
授权委托书
2015/01/28 职场文书
倡议书的格式写法
2015/04/28 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
原生JS实现分页
2022/04/19 Javascript
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL