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抓取京东价格分析京东商品价格走势
Jan 09 Python
python中的字典详细介绍
Sep 18 Python
Python中死锁的形成示例及死锁情况的防止
Jun 14 Python
Python中super函数的用法
Nov 17 Python
Python类的继承和多态代码详解
Dec 27 Python
python: line=f.readlines()消除line中\n的方法
Mar 19 Python
opencv python 傅里叶变换的使用
Jul 21 Python
Python面向对象之类的内置attr属性示例
Dec 14 Python
简单了解python关系(比较)运算符
Jul 08 Python
python实现的读取网页并分词功能示例
Oct 29 Python
pytorch程序异常后删除占用的显存操作
Jan 13 Python
tensorflow 查看梯度方式
Feb 04 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 用sock技术发送邮件的函数
2007/07/21 PHP
php密码生成类实例
2014/09/24 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
浅谈PHP进程管理
2019/03/08 PHP
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python登录注册验证功能实现
2018/06/18 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
优秀高中生事迹材料
2014/02/11 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
家长会主持词
2014/03/26 职场文书
学生评语大全
2014/04/18 职场文书
销售岗位职责范本
2014/06/12 职场文书
检讨书1000字
2014/10/11 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
初中学生操行评语
2014/12/26 职场文书
村官个人总结范文
2015/03/03 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python