flask将多张图片通过base64发送给前端,并在前端展示
时间: 2024-06-11 17:08:22 浏览: 16
1. 在Flask中,我们可以使用Python的base64模块将图片转换为base64编码字符串,并将其作为JSON响应发送给前端。以下是一个示例:
```python
import base64
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/images')
def get_images():
# 读取图片文件
with open('image1.jpg', 'rb') as f:
image1 = f.read()
with open('image2.jpg', 'rb') as f:
image2 = f.read()
# 将图片转换为base64编码字符串
encoded_image1 = base64.b64encode(image1).decode('utf-8')
encoded_image2 = base64.b64encode(image2).decode('utf-8')
# 将编码后的图片字符串放入JSON响应中
response = jsonify(images=[encoded_image1, encoded_image2])
return response
```
2. 前端可以使用JavaScript将base64编码的图片字符串转换为图片,并将其展示在页面上。以下是一个示例:
```javascript
fetch('/images')
.then(response => response.json())
.then(data => {
const images = data.images;
const container = document.getElementById('image-container');
images.forEach(encodedImage => {
// 创建img元素
const img = document.createElement('img');
// 设置图片src为base64编码字符串
img.src = `data:image/jpeg;base64,${encodedImage}`;
// 将图片添加到容器中
container.appendChild(img);
});
})
.catch(error => console.error(error));
```
在上面的示例中,我们首先从服务器获取JSON响应,然后将其中的图片字符串解码为图片,并将其添加到页面中的一个容器中。需要注意的是,我们需要在img的src属性中指定图片的MIME类型(在这个例子中是`image/jpeg`)。
相关推荐
![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_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)
![](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)