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的Supervisor进行进程监控以及自动启动
May 29 Python
Python代码的打包与发布详解
Jul 30 Python
linux 下实现python多版本安装实践
Nov 18 Python
Python中基础的socket编程实战攻略
Jun 01 Python
Python中使用支持向量机SVM实践
Dec 27 Python
python 3.6.5 安装配置方法图文教程
Sep 18 Python
在Python中实现shuffle给列表洗牌
Nov 08 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
Mar 01 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
Feb 15 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
Apr 16 Python
Python使用Excel将数据写入多个sheet
May 16 Python
教你怎么用python爬取爱奇艺热门电影
May 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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
功能强大的php分页函数
2016/07/20 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
Python素数检测的方法
2015/05/11 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
python得到电脑的开机时间方法
2018/10/15 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
windows支持哪个版本的python
2020/07/03 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
先进个人事迹材料
2014/01/25 职场文书
捐书倡议书
2014/08/29 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
科技活动周标语
2014/10/08 职场文书
2014年采购员工作总结
2014/11/18 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
工作会议通知
2015/04/15 职场文书
婚宴来宾致辞
2015/07/28 职场文书
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python