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

Posted 2023-03-09

参考技术A DHogan 2017-05-16 14:50:48

收藏 12

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

版权

<article class="baidu_pl" style="box-sizing: inherit; outline: 0px; margin: 0px; padding: 16px 0px 0px; display: block; position: relative; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-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>

05从头开始用flask搭建个人博客，标签Tags的前端显示和视图

之前已经将文章post的前端展示和详情页展示的流程跑通了，都已经能显示，而且有分页效果。虽然还有些瑕疵，已经不影响使用。今天开始讲标签Tags的视图和前端显示效果。不过在实现标签的视图和前端展示之前，我们先来说说另一个

Flask上下文处理器app.context_processor

Flask的上下文处理器自动向模板的上下文中插入变量，带有app.context_processor装饰的方法，会返回一个字典的函数，本次的博客标签需要在主页，详情页等地方都显示Tags都显示，如果每次都要调用一个视图来返回Tags显得很不优雅。因此，使用上下文处理器，返回一个让模板都看得到的变量tags，这样在每次访问主页，详情页等，都会生效。

在app中注册上下文处理器

#该方法会在creat_app中调用def register_template_context(app): @app.context_processor def make_template_context(): admin = Admin.query.first() tags = Tags.query.order_by(Tags.name).all() return dict(admin=admin, tags=tags)

这样注册之后，就会在前端的模板中会获取到相应的admin的值，tags的值。在前端的_sideber.html中有相应的标签显示的代码。

{% if tags %} << span="">div class="card mb-3"> << span="">div class="card-header">标签div> << span="">ul class="list-group list-group-flush"> {% for tag in tags %} << span="">li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> << span="">a href="{{ url_for('blog.show_tag', tag_id=tag.id) }}"> {{ tag.name }} a> << span="">span class="badge badge-primary badge-pill"> {{ tag.posts|length }}span> li> {% endfor %} ul> div>{% endif %}

如果tags有值，那么就会迭代显示每一个tag的值。显示的效果如下:

蓝色的字体是标签的名字，后面的数字是每个标签对应的文章数量。显示的效果和李辉大佬的demo效果还是有差别，估计是css的原因，之后再查漏补缺，做些改动。

关于标签的前端的视图基本就这两个，管理的视图需要在管理模块那里编写。下一期将要开始评论的前端展示视图，以及回复的视图。