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 19 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
Jan 12 Python
简单实现python进度条脚本
Dec 18 Python
Python iter()函数用法实例分析
Mar 17 Python
python多进程提取处理大量文本的关键词方法
Jun 05 Python
Python3单行定义多个变量或赋值方法
Jul 12 Python
django数据库自动重连的方法实例
Jul 21 Python
详解python中各种文件打开模式
Jan 19 Python
Python urlencode和unquote函数使用实例解析
Mar 31 Python
Python实现疫情通定时自动填写功能(附代码)
May 27 Python
python使用hdfs3模块对hdfs进行操作详解
Jun 06 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
Jun 08 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP时间函数使用详解
2019/03/21 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
vue.js的提示组件
2017/03/02 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
财务会计实习报告体会
2013/12/20 职场文书
同事打架检讨书
2014/02/04 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
人大调研汇报材料
2014/08/14 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
店面出租协议书范本
2014/11/28 职场文书
2015年企业新年寄语
2014/12/08 职场文书
交通事故案件代理词
2015/05/23 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技