flask将多张图片通过base64发送给前端,并在前端展示多张图片
时间: 2023-10-17 18:09:27 浏览: 55
在Flask中,可以使用base64将多张图片转换为字符串格式并发送给前端。下面是示例代码:
```python
from flask import Flask, render_template, jsonify
import base64
app = Flask(__name__)
@app.route('/')
def index():
# 读取多张图片文件
img1 = open('img1.jpg', 'rb').read()
img2 = open('img2.jpg', 'rb').read()
# 将图片转换为base64字符串
img1_str = base64.b64encode(img1).decode('utf-8')
img2_str = base64.b64encode(img2).decode('utf-8')
# 将多张图片的base64字符串发送给前端
return jsonify({'img1': img1_str, 'img2': img2_str})
if __name__ == '__main__':
app.run()
```
在前端页面中,可以使用JavaScript将base64字符串转换为图片并展示出来。下面是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展示多张图片</title>
</head>
<body>
<div id="image-container"></div>
<script>
const imageContainer = document.getElementById('image-container');
// 发送Ajax请求获取多张图片的base64字符串
fetch('/')
.then(response => response.json())
.then(data => {
// 将base64字符串转换为图片并添加到页面中
const img1 = new Image();
img1.src = `data:image/jpeg;base64,${data.img1}`;
imageContainer.appendChild(img1);
const img2 = new Image();
img2.src = `data:image/jpeg;base64,${data.img2}`;
imageContainer.appendChild(img2);
});
</script>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)