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

DHogan 2017-05-16 14:50:48

收藏 12

分类专栏： 学习前端记录 python

版权

<article class="baidu_pl" style="box-sizing: inheritoutline: 0pxmargin: 0pxpadding: 16px 0px 0pxdisplay: blockposition: relativecolor: rgb(51, 51, 51)font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-seriffont-size: 14pxfont-style: normalfont-variant-ligatures: normalfont-variant-caps: normalfont-weight: 400letter-spacing: normalorphans: 2text-align: starttext-indent: 0pxtext-transform: nonewhite-space: normalwidows: 2word-spacing: 0px-webkit-text-stroke-width: 0pxtext-decoration-style: initialtext-decoration-color: initial">

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

问题疑皮州点：通常前端的<img>标签只会接受url的形式来展示图片，没试过在返回服务器本地的一张图片给前端。

因此写个记录一下这个看起来有点奇葩的场景（通常个人模握启博客，个人网站没有钱用第三方的服务都会采用存储在服务器本地的方法啦。旦如）

项目目录：

dyy_project

|

|----static (新建flask项目时自动建的，没有任何文件)

|----templates

|-----index.html (前端页面)

|----dyy_project.py (flask项目启动文件)

文件内容：dyy_project.py

文件内容：index.html

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

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

</article>

flask 数据通信的流程  前后端刷新的方法

对于服务器开发工程师来说，

前端页面的刷新分：1、后端刷新2、前端刷新

后埋塌端刷新的实现是通过模板+数据的方式实现的

2、前端刷新是通过jQuery的Ajax +jQuery动态加载HTML、CSS的方式实现的

不管是后端刷新和前端刷新，它们都是需要通过HTTP/HTTPS通信协议，这种协议实现数据通信，使用请求和响应完成一次铅缓完整Web通信的过程。

1、后端刷新页面的流程

1.1实现服务器的API接口文档

1.2使用Flask实现Web服务器应用程序的构建

1.3 实现前端请求的URL，声明对应的Route（路由），一般情况下，一个URL对应一个路由。（？作用：声明？以后的都是参槐液模数，前边的是URL）

1.4 实现对应路由的视图函数，每个视图函数都需要对应一个视图容器（模板），在这个视图函数中进行数据+模板的方式进行服务器的响应。

1.5 实现对应模板，模板是通过jinjia2第三方插件的方式，使用模板语法来实现数据的动态显示。

2、前端刷新页面的流程

2.1创建一个请求对象；

2.2配置请求

2.3发送请求；

2.4接受请求。

---