img标签三种获取数据方式

1.通过静态文件加载

<img src="./test.png">

2.通过字节传递二进制图片文件

from jinja2 import Template,FileSystemLoader,Environment
env = Environment(loader=FileSystemLoader("./"))
template = env.get_template("./test.html")import matplotlib.pyplot as plt
x = [1,2,3]
y = [1,2,3]
plt.plot(x,y)
from io import BytesIO
buf = BytesIO()  #另一种写入BytesIO的方法
plt.savefig(buf,format='png') #另一种写入BytesIO的方法
import base64
data = base64.b64encode(buf.getvalue()).decode()
data = "data:image/png;base64," + data
temp_render = template.render(name=data)
print(temp_render)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="{{ name }}"></body>
</html>

3.通过get请求
img标签中的src属性本质是向服务器发送一个get请求

@app.route('/<img_id>')
def capt(img_id):# 生成图片验证码text, image = captcha.generate_captcha()rsp = make_response(image)rsp.mimetype = 'image/jpg'return rsp

<img src="{{ img_id }}" alt="图形验证码" class="pic_code">

img标签三种获取数据方式相关推荐

多角度对比数据中心常见的三种走线方式
01 三种走线方式的施工图片 ▽下走线(地板下走线) ▽天花吊顶上走线 ▽机柜顶部走线 02 三种走线方式对比通过上面的比较,毫无疑问,机柜顶部走线模式是最有优势的,给用户带来很多好处,包括维护方便 ...
【redis】三种redis数据导出导入方式
文章目录 1.概述一.redis-dump方式二.aof方式导入三.rdb文件迁移方式 1.概述转载:三种redis数据导出导入方式一.redis-dump方式 redis-dump安装 y ...
Verilog VHDL三种建模描述方式——2选1数据选择器
标题Quartus II 标题 Verilog VHDL三种建模描述方式--2选1数据选择器 1,结构化描述方式: 是使用实例化低层次模块的方法,即调用其他已经定义过的低层次模块对整个电路的功能进行描 ...
Python数据处理(一)：处理 JSON、XML、CSV 三种格式数据
Python 数据处理系列博客来啦! 本系列将以<Python数据处理>这本书为基础,以书中每章一篇博客的形式带大家一起学习 Python 数据处理.书中有些地方讲的不太详细,我会查阅其他 ...
SPA优缺点、解决单页面应用的SEO困难问题以及三种网页渲染方式
SPA特点优点缺点总结 1. 单页Web应用(SPA - Single Page web Application) 也就是说只有一个HTML文件的Web应用, 我们就称之为单页Web应用, 就称之为S ...
Streamr助你掌控自己的数据(2)——三种整合数据至Streamr的典型场景
博客说明所有刊发内容均可转载但是需要注明出处. 三种整合数据至Streamr的典型场景本系列文档主要介绍怎么通过Streamr管理自己的DATA,整个系列包括三篇教程文档,分别是:教你5分钟上传数 ...
Hibernate获取数据方式与缓存使用
Hibernate获取数据的方式有不同的几种,其与缓存结合使用的效果也不尽相同,而Hibernate中具体怎么使用缓存其实是我们很关心的一个问题,直接涉及到性能方面. 缓存在Hibernate中主要有 ...
Spark支持三种分布式部署方式
目前Apache Spark支持三种分布式部署方式,分别是standalone.spark on mesos和 spark on YARN,其中,第一种类似于MapReduce 1.0所采用的模式,内 ...
VM虚拟机-三种网络连接方式（桥接、NAT、仅主机模式）
目录虚拟机网络连接一.Bridged(桥接) 二.NAT(网络地址转换) 三.Host-Only(仅主机) 在vmware workstation中如何配置网络连接方式一.桥接二.NAT 三. ...

img标签三种获取数据方式

img标签三种获取数据方式相关推荐

最新文章

热门文章

img标签 三种获取数据方式

img标签 三种获取数据方式相关推荐

最新文章

热门文章

img标签三种获取数据方式

img标签三种获取数据方式相关推荐