flask-前端-requests之response对应关系 img

1)flask

可参考img标签的三种展示方式

1)标准写法

@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">

1)简单写法

@app.route('/<img_id>')
def capt(img_id):
    # 生成图片验证码
    text, image = captcha.generate_captcha() # image是图片二进制文件
    return image {'Content-Type':'image/png; charset=utf-8'}
<img src="{{ img_id }}" alt="图形验证码" class="pic_code">

2)requests

1.content二进制直接保存
r = requests.get(‘https://127.0.0.1’)
with open(filename, ‘wb’) as fd:
fd.write(r.content)

2.raw+stream流分片保存

response.raw获得字节(和content相似,应该是将ascii码也用十六进制表示的意思),原始套接字,要打开stream参数

r = requests.get('https://127.0.0.1', stream=True)
r.raw
r.raw.read(10)

一般使用以下形式保存

with open(filename, 'wb') as fd:
    for chunk in r.iter_content(chunk_size=128):
        fd.write(chunk)

3)前端

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">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值