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 相关文章推荐
PHP魔术方法__ISSET、__UNSET使用实例
Nov 25 Python
python批量制作雷达图的实现方法
Jul 26 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
Jan 06 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
Dec 05 Python
python之验证码生成(gvcode与captcha)
Jan 02 Python
Python 保存矩阵为Excel的实现方法
Jan 28 Python
python实现字典嵌套列表取值
Dec 16 Python
使用Pandas将inf, nan转化成特定的值
Dec 19 Python
python如何删除文件、目录
Jun 23 Python
如何通过python实现IOU计算代码实例
Nov 02 Python
重构Python代码的六个实例
Nov 25 Python
python实现Thrift服务端的方法
Apr 20 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下常用正则表达式整理
2010/10/26 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python简单文本处理的方法
2015/07/10 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python爬虫实现中英翻译词典
2019/06/25 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python urllib2运行过程原理解析
2020/06/04 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
Pandas之缺失数据的实现
2021/01/06 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
厨房领班竞聘演讲稿
2014/04/23 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
科技活动总结范文
2015/05/11 职场文书
诚信高考倡议书
2019/06/24 职场文书