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

yipeiwu_com6年前Python基础

场景需求:需要在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 异常处理总结

       最近,做个小项目经常会遇到Python 的异常,让人非常头疼,故对异常进行整理,避免下次遇到异常不知所措,以下就...

Python中文编码知识点

Python中文编码知识点

如何用 Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会碰到中文编码问题。 Python 文件中如果未指定编码,在执行过程...

python 实现查找文件并输出满足某一条件的数据项方法

python 实现文件查找和某些项输出 本文是基于给定一文件(students.txt),查找其中GPA分数最高的 输出,同时输出其对应的姓名和学分 一. 思路 首先需要打开文件,读取文...

举例讲解Python常用模块

datetime 日期时间类,主要熟悉API,时区的概念与语言无关。 from datetime import datetime as dt dt.utcnow() # 系统UTC时...

python元组和字典的内建函数实例详解

本文实例讲述了python元祖和字典的内建函数。分享给大家供大家参考,具体如下: 元组Tuple 元组是序列类型一种,也是不可变类型数据结构,对元组修改后会生成一个新的元组。所以Tupl...