使用flask编写在前端展示图片的代码
时间: 2024-06-11 11:08:33 浏览: 20
以下是一个简单的示例代码,使用 Flask 和 HTML 来展示图片。
app.py 文件:
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
if __name__ == '__main__':
app.run(debug=True)
```
templates/home.html 文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flask Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>
<div>
<img src="{{ url_for('static', filename='images/image1.jpg') }}" alt="Image 1">
<img src="{{ url_for('static', filename='images/image2.jpg') }}" alt="Image 2">
<img src="{{ url_for('static', filename='images/image3.jpg') }}" alt="Image 3">
</div>
</body>
</html>
```
在这个示例中,我们创建了一个 Flask 应用,并定义了一个路由来渲染 home.html 模板。在 HTML 文件中,我们使用 `url_for` 函数来获取静态文件的 URL,并将其设置为 `img` 标签的 `src` 属性。这里的静态文件存储在 static/images 目录下。
运行应用后,访问 http://localhost:5000 即可在浏览器中看到图片展示页面。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)