html如何使用JavaScript将python后端中的多张图片传输到web界面上
时间: 2024-04-29 16:24:42 浏览: 8
你可以使用 JavaScript 的 XMLHttpRequest 对象或 Fetch API 与 Python 后端进行通信,将图片传输到前端后,使用 HTML 标签的 img 元素来呈现图片。可以使用如下代码:
HTML:
```html
<div id="images"></div>
```
JavaScript:
```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', '/get_images', true); // 发送 GET 请求获取图片
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status === 200) {
const images = xhr.response;
const imagesDiv = document.getElementById('images');
for (let i = 0; i < images.length; i++) {
const img = document.createElement('img');
img.src = images[i];
imagesDiv.appendChild(img); // 将图片添加到页面中
}
}
};
xhr.send();
```
Python 后端:
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/get_images', methods=['GET'])
def get_images():
images = ['image1.jpg', 'image2.jpg', 'image3.jpg'] # 图片地址列表
return jsonify(images)
if __name__ == '__main__':
app.run()
```
这样,就可以在页面上显示多张图片了。