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 相关文章推荐
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
Apr 28 Python
python中getaddrinfo()基本用法实例分析
Jun 28 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
Dec 14 Python
python利用socketserver实现并发套接字功能
Jan 26 Python
PyQt5每天必学之组合框
Apr 20 Python
Python使用 Beanstalkd 做异步任务处理的方法
Apr 24 Python
执行Django数据迁移时报 1091错误及解决方法
Oct 14 Python
python中seaborn包常用图形使用详解
Nov 25 Python
在python中做正态性检验示例
Dec 09 Python
python随机生成大小写字母数字混合密码(仅20行代码)
Feb 01 Python
Python实现小黑屋游戏的完整实例
Jan 06 Python
python os.listdir()乱码解决方案
Jan 31 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
深入理解Python爬虫代理池服务
2018/02/28 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
jupyter notebook 重装教程
2020/04/16 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
什么是servlet
2012/05/08 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
表彰先进集体通报
2014/01/12 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
安全口号大全
2014/06/21 职场文书
初中体育教学随笔
2015/08/15 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
pytorch Dropout过拟合的操作
2021/05/27 Python
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android