python的flask前端显示图片_python 实现Flask中返回图片流给前端展示

场景需求：需要在Flask服务器的本地找一张图片返回给前端展示出来。

问题疑点：通常前端的标签只会接受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

Flask Show Image

注意：在img标签中的src一定要按照 data:;base64,{{img_stream}} 的形式添加，否则显示不出图片。

然后启动你的Flask程序，访问http://127.0.0.1:8080 你就可以看到你的图片了。

以上这篇python 实现Flask中返回图片流给前端展示就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

本文标题: python 实现Flask中返回图片流给前端展示

本文地址: http://www.cppcns.com/jiaoben/python/297975.html

python的flask前端显示图片_python 实现Flask中返回图片流给前端展示相关推荐

python的flask前端显示图片_python Flask中返回图片流给前端展示
python Flask中返回图片流给前端展示 image DHogan 2017-05-16 14:50:48 image 20440 image 收藏 12 版权场景需求:需要在Flask服务器 ...
vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
python gui按顺序显示图片_python tkinter GUI绘制,以及点击更新显示图片代码
tkinter 绘制GUI简单明了,制作一些简单的GUI足够,目前遇到的一个问题是不能同时排列显示多幅图片(目前没找到同时显示解决方法), 退而求其次,改成增加一个update按钮,每次点下按钮自动更 ...
python qt listview如何显示图片_python如何导入图片
python如何导入图片? 一.导入图片资源方法1:直接从源图片中导(图片位于images文件夹内) 1 2 3 4 self.label1=QLabel(self)self.label1.setP ...
python在左上角显示图片_python – 将文本放在matplotlib图的左上角
你可以使用 text. text(x, y, s, fontsize=12) 文本坐标可以相对于轴给出,因此文本的位置将独立于图的大小: The default transform specifies ...
react前端显示图片_在react中怎么动态渲染图片？
在react中怎么动态渲染图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. React 动态渲染图片,提升用户体验市场上竞争是非常残酷的,众所周知, ...
react前端显示图片_在 React 中使用 SVG 图标组件
SVG 很酷,它们能放大放小. 那么 SVG 的优点是什么? SVG 或可缩放矢量图形是基于 XML 的格式图像格式,可以在保持图像质量的同时缩放到任何大小.因此,当你需要根据需要调整大小的图像时,S ...
Web Api 返回图片流给前端
public class TestController : ApiController{public HttpResponseMessage GetImg(){//获取文件的绝对路径string ab ...
相信我，只要2分钟，你会爱上flask（前端显示图片）
今天带大家flask体验一下,Python进行后端开发时,怎样将数据给到前端(web)的. 虽说flask是一个基于Python的轻量级的开发框架,但要想用他实现一个很棒很棒的web网页的话,实际上还 ...

python的flask前端显示图片_python 实现Flask中返回图片流给前端展示

python的flask前端显示图片_python 实现Flask中返回图片流给前端展示相关推荐

最新文章

热门文章