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中操作字典之update()方法的使用
May 22 Python
Python设计模式编程中Adapter适配器模式的使用实例
Mar 02 Python
web.py 十分钟创建简易博客实现代码
Apr 22 Python
Python 性能优化技巧总结
Nov 01 Python
python数据清洗系列之字符串处理详解
Feb 12 Python
Python内置函数—vars的具体使用方法
Dec 04 Python
Python自动抢红包教程详解
Jun 11 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
Apr 21 Python
Python Dataframe常见索引方式详解
May 27 Python
python和js交互调用的方法
Jun 23 Python
Python用Jira库来操作Jira
Dec 28 Python
如何利用python创作字符画
Jun 25 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 写文本日志实现代码
2010/05/18 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
angular十大常见问题
2017/03/07 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
Python迭代器和生成器介绍
2015/03/06 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python 模块导入问题汇总
2021/02/01 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
软件测试题目
2013/02/27 面试题
体育专业个人求职信范文
2013/12/27 职场文书
毕业生自荐信格式
2014/03/07 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
义诊活动通知
2015/04/24 职场文书
社区党务工作总结2015
2015/05/19 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书