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生成指定尺寸缩略图的示例
May 07 Python
Python实现PS图像调整之对比度调整功能示例
Jan 26 Python
Python Scapy随心所欲研究TCP协议栈
Nov 20 Python
PyCharm更改字体和界面样式的方法步骤
Sep 27 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
Oct 23 Python
Python中的wordcloud库安装问题及解决方法
May 27 Python
Python3.7安装pyaudio教程解析
Jul 24 Python
如何用Anaconda搭建虚拟环境并创建Django项目
Aug 02 Python
python中pdb模块实例用法
Jan 15 Python
TensorFlow2.0使用keras训练模型的实现
Feb 20 Python
2021年pycharm的最新安装教程及基本使用图文详解
Apr 03 Python
python scipy 稀疏矩阵的使用说明
May 26 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简单判断手机设备的方法
2016/08/23 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
php精度计算的问题解析
2019/06/21 PHP
xtree.js 代码
2007/03/13 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Python元组及文件核心对象类型详解
2018/02/11 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python ellipsis 的用法详解
2020/11/20 Python
python基于opencv 实现图像时钟
2021/01/04 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
创联软件面试题笔试题
2012/10/07 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
班主任班级寄语大全
2014/04/04 职场文书
詹天佑教学反思
2014/04/30 职场文书
合作协议书范文
2014/08/20 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS