python Flask中返回图片流给前端展示
来源:互联网 发布:域名投资的秘密 pdf 编辑:程序博客网 时间:2024/05/17 08:15
场景需求:需要在Flask服务器的本地找一张图片返回给前端展示出来。
问题疑点:通常前端的<img>标签只会接受url的形式来展示图片,没试过在返回服务器本地的一张图片给前端。
因此写个记录一下这个看起来有点奇葩的场景(通常个人博客,个人网站没有钱用第三方的服务都会采用存储在服务器本地的方法啦。)
项目目录:
dyy_project
|
|----static(新建flask项目时自动建的,没有任何文件)
|----templates
|-----index.html (前端页面)
|----dyy_project.py (flask项目启动文件)
文件内容:dyy_project.py
#!/usr/bin/env python# coding=utf-8from flask import Flaskfrom flask import render_templateapp = 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 你就可以看到你的图片了。
阅读全文
0 0
- python Flask中返回图片流给前端展示
- python和flask中返回JSON数据
- Flask返回二进制图片
- python轻量级前端Flask
- webpy中如何返回json格式给前端
- python中flask 常见问题
- Java小技巧-在图片上写数据(数据封装成图片返回给前端)
- Flask中图片的刷新
- 前端设计之图片的展示
- 利用python+flask实现股票查询与结果网页展示
- python 中flask的用法
- python flask发送邮件嵌入图片 Outlook
- 将URL图片转为输出流返回前端
- json字符串返回给前端处理
- PHP给前端返回一个JSON‘对象’
- Python Web 9 —— flask中在js中如何解析render_template传递给html的数据
- Spring mvc mybatis 中Date类型 在返回给前端时需要格式化的实现方式
- 前端中返回给浏览器的return ture和return false
- 【Shader】用 Shader 画圆
- Pytorch学习笔记(五)
- Python寻找路径和查找文件路径
- Android开发中一种两次点击返回键退出应用的方法
- Mutlisim和Proteus仿真
- python Flask中返回图片流给前端展示
- 为什么你有10年经验,但成不了专家?
- jQuery插件防冲突原理
- 心跳机制的作用
- mac wget下载安装
- windows7下python3.6中用pip安装numpy
- String,StringBuffer与StringBuilder的区别
- JSON开发笔记(一)—— JSON基础
- 使用 Office 365 PowerShell 管理用户帐户和许可证