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写的windows服务不能启动的问题
Apr 15 Python
Python爬虫DOTA排行榜爬取实例(分享)
Jun 13 Python
Python3.5 Pandas模块之Series用法实例分析
Apr 23 Python
在django view中给form传入参数的例子
Jul 19 Python
Python-接口开发入门解析
Aug 01 Python
Python实现ATM系统
Feb 17 Python
python使用Thread的setDaemon启动后台线程教程
Apr 25 Python
Django Channel实时推送与聊天的示例代码
Apr 30 Python
python如何求100以内的素数
May 27 Python
给Django Admin添加验证码和多次登录尝试限制的实现
Jul 26 Python
Python3如何使用多线程升程序运行速度
Aug 11 Python
python中append函数用法讲解
Dec 11 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
使javascript也能包含文件
2006/10/26 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
js实现点击烟花特效
2020/10/14 Javascript
Python生成随机密码
2015/03/10 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Django异步任务线程池实现原理
2019/12/17 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
自考生毕业自我鉴定
2013/10/10 职场文书
小学生评语集锦
2014/04/18 职场文书
婚前保证书
2014/04/29 职场文书
小学安全汇报材料
2014/08/14 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL