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中有趣在__call__函数
Jun 21 Python
Django中模版的子目录与include标签的使用方法
Jul 16 Python
Python解析excel文件存入sqlite数据库的方法
Nov 15 Python
使用Python对MySQL数据操作
Apr 06 Python
Python 含参构造函数实例详解
May 25 Python
python如何让类支持比较运算
Mar 20 Python
python opencv人脸检测提取及保存方法
Aug 03 Python
Python datetime和unix时间戳之间相互转换的讲解
Apr 01 Python
Python Flask框架扩展操作示例
May 03 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
May 12 Python
详解vscode实现远程linux服务器上Python开发
Nov 10 Python
C站最全Python标准库总结,你想要的都在这里
Jul 03 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 MYSQL 数据备份类
2009/06/19 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
对联广告js flash激活
2006/10/19 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python的历史与优缺点整理
2020/05/26 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
理发店策划方案
2014/06/05 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis