python 实现Flask中返回图片流给前端展示

场景需求：需要在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中返回图片流给前端展示就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在flask中使用python-dotenv+flask-cli自定义命令(推荐)

    最近在重构 flask 项目的时候发现项目的环境变量异常的混乱,非常不便于管理.而且,更重要的事情是我需要通过自定义命令来运行 devlopment 和 production 两种项目环境. 自定义命令工具--flask-cli 在Flask 1.0+ 中已经支持了flask-cli,在翻阅了flask-cli文档之后,发现文档中提供的自定义命令的方法约束还是有点多,而且介绍的也不是特别详细.后来,通过查看flask-cli的源码发现flask-cli是基于Click开发的. Click is

  • Flask实现图片的上传、下载及展示示例代码

    用Flask处理图片非常容易,这一篇学习一下图片的上传.下载及展示.还是以实例代码演示为主. 首先,实现一个简单的上传(过程中未做任何处理,只是为了演示) 点击选择图片,输入李四: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

  • python 解决flask 图片在线浏览或者直接下载的问题

    目前是把图片存在mongodb数据库,实现一个方法,比如 访问 /get_pic/ID 能实现图片在浏览器打开,添加了一个状态,比如?filename=1.png,实现图片直接下载, 需要在读取图片函数中,给response 加上headers: 在 flask 中 response=make_response(f.read()) 需要下载就添加以下headers 当filename为中文时会报asicc编解码错误, 此时,import urllib (py3) filename=urllib.

  • python 实现Flask中返回图片流给前端展示

    场景需求:需要在Flask服务器的本地找一张图片返回给前端展示出来. 问题疑点:通常前端的<img>标签只会接受url的形式来展示图片,没试过在返回服务器本地的一张图片给前端. 因此写个记录一下这个看起来有点奇葩的场景(通常个人博客,个人网站没有钱用第三方的服务都会采用存储在服务器本地的方法啦.) 项目目录: dyy_project | |----static (新建flask项目时自动建的,没有任何文件) |----templates |-----index.html (前端页面) |---

  • python和flask中返回JSON数据的方法

    在python中可以使用json将数据格式化为JSON格式: 1.将字典转换成JSON数据格式: s=['张三','年龄','姓名'] t={} t['data']=s return json.dumps(t,ensure_ascii=False) 2.将列表转换成JSON数据格式: s=['张三','年龄','姓名'] return json.dumps(s,ensure_ascii=False) 使用json转换的在前端显示的数据为JSON字符串. 使用flask的jsonify转换后,在前

  • springboot返回图片流的实现示例

    目录 一.返回BufferedImage 二.返回byte[] 一.返回BufferedImage 由于spring mvc不支持返回BufferedImage ,所以增加图片转换器 @Configuration public class WebMvcConfig implements WebMvcConfigurer { /** * 增加图片转换器 * @param converters */ @Override public void extendMessageConverters(List

  • 在Python的Flask中使用WTForms表单框架的基础教程

    在Python的Flask中使用WTForms表单框架的基础教程

    下载和安装 安装 WTForms 最简单的方式是使用 easy_install 和 pip: easy_install WTForms # or pip install WTForms 你可以从 PyPI 手动 下载 WTForms 然后运行 python setup.py install . 如果你是那种喜欢这一切风险的人, 就运行来自 Git 的最新版本, 你能够获取最新变更集的 打包版本, 或者前往 项目主页 克隆代码仓库. 主要概念 Forms 类是 WTForms 的核心容器. 表单(

  • python的flask框架难学吗

    Flask框架难学吗?它和Django哪个更容易一些,这可能是学Python web开发的同学经常问的问题,下面来说一下flask框架. Flask是python的web框架,最大的特征是轻便,让开发者自由灵活的兼容要开发的feature. 为什么要从Flask开始学习web框架? 1.python语言的灵活性给予了Flask同样的特征: 2.无论是用户画像还是产品推荐,python相比其他语言都有极大的优势: 3.Flask轻便,容易上手,试错成本低. 所以,从搭建一个轻便的博客出发,既要容易

  • Python的Flask框架中SERVER_NAME域名项的配置教程

    Flask中的SERVER_NAME主要做两件事: 协助Flask在活动的请求(request)之外生成绝对URL(比如邮件中嵌入网站URL) 用于子域名支持 很多人误以为它可以做这两件事之外的其它事情. 一.第一件事:绝对URL 我们知道,url_for默认情况下是生成相对URL,它有个参数_external,如果设置为真,则会生成一个绝对URL(就是HTTP开头带域名等信息的).若不指定SERVER_NAME,默认使用当前活动的请求(request)来生成URL. 下面举个例子演示一下: #

  • 在Python的Flask框架中实现单元测试的教程

     概要 在前面的章节里我们专注于在我们的小应用程序上一步步的添加功能上.到现在为止我们有了一个带有数据库的应用程序,可以注册用户,记录用户登陆退出日志以及查看修改配置文件. 在本节中,我们不为应用程序添加任何新功能,相反,我们要寻找一种方法来增加我们已写代码的稳定性,我们还将创建一个测试框架来帮助我们防止将来程序中出现的失败和回滚. 让我们来找bug 在上一章的结尾谈到,我故意在应用程序中引入一个bug.接下来让我描述一下它是什么样的bug,然后看看当我们的程序不按照我们意愿执行的时候,它在其中

  • Python的Flask框架中的Jinja2模板引擎学习教程

    Flask的模板功能是基于Jinja2模板引擎来实现的.模板文件存放在当前目前下的子目录templates(一定要使用这个名字)下. main.py 代码如下: from flask import Flask, render_template app = Flask(__name__) @app.route('/hello') @app.route('/hello/<name>') def hello(name=None): return render_template('hello.html

  • 解决python flask中config配置管理的问题

    在项目中我们需要配置各种环境.如果我们的配置项很少的话,可以直接简单粗暴的来: 比如: app =Flask(__name__) app.config['DEBUG']=True app.config其实是实例化了flask.config.Config类的实例, 继承于python内置数据结构dict字典,可以使用update方法: app.config.update( DEBUG=true, SECRET_KEY='xxxx' ) 如果设置很多的情况下,想要集中起来管理设置项, 应该将他们存放

  • Python Flask中Cookie和Session区别详解

    目录 前言 安装 创建虚拟环境 进入虚拟环境 安装 flask Cookie的使用 Session的使用 前言 本篇文章,阐述一下Flask中Cookie和Session 为什么要说Cookie和Session呢? 答:因为http请求是无状态的,怎么理解呢?当你访问B站时,如果你没有Cookie或者Session,B站就认为你是一个没有登录的用户.如果你有Cookie或Session,那么B站就知道你登录了,并且知道你是谁.所以可以把跟你相关的资料返回 给你两者的区别: 答:Cookie是明文

随机推荐