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中尾递归用法实例详解
Apr 28 Python
在Linux系统上安装Python的Scrapy框架的教程
Jun 11 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
Jun 02 Python
对numpy和pandas中数组的合并和拆分详解
Apr 11 Python
python爬虫之验证码篇3-滑动验证码识别技术
Apr 11 Python
详解使用python绘制混淆矩阵(confusion_matrix)
Jul 14 Python
Python从列表推导到zip()函数的5种技巧总结
Oct 23 Python
Python爬虫爬取、解析数据操作示例
Mar 27 Python
python 读取二进制 显示图片案例
Apr 24 Python
4款Python 类型检查工具,你选择哪个呢?
Oct 30 Python
pycharm + django跨域无提示的解决方法
Dec 06 Python
用Python将GIF动图分解成多张静态图片
Jun 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生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
面试常见的js算法题
2017/03/23 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python Pandas数据中对时间的操作
2019/07/30 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
python 初始化一个定长的数组实例
2019/12/02 Python
python中turtle库的简单使用教程
2020/11/11 Python
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
企业元宵节主持词
2014/03/25 职场文书
防灾减灾活动总结
2014/08/30 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
离婚答辩状范文
2015/05/22 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL