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将文本分每两行一组并保存到文件
Mar 19 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
Jun 04 Python
便捷提取python导入包的属性方法
Oct 15 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
Feb 16 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
Mar 11 Python
PyQt5实现简易计算器
May 30 Python
Python中将两个或多个list合成一个list的方法小结
May 12 Python
详解python深浅拷贝区别
Jun 24 Python
PyCharm导入python项目并配置虚拟环境的教程详解
Oct 13 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
Oct 17 Python
python爬虫爬取网页数据并解析数据
Sep 18 Python
Python爬虫新手入门之初学lxml库
Dec 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
destoon常用的安全设置概述
2014/06/21 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
教师实习自我鉴定
2013/12/18 职场文书
企业军训感言
2014/02/08 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
Java数据结构之链表相关知识总结
2021/06/18 Java/Android