如何将html中有规律的图片如1.image1.png,1.image2.png,……34.image1.png……显示出来,有索引Idx:1……Idx:34……,有相对应的文件夹1,2,……34……,文件夹内存放这些图片
时间: 2024-01-19 08:03:48 浏览: 68
可以使用Python中的Flask框架来实现这个功能。具体步骤如下:
1. 创建一个Flask应用并定义路由。可以定义一个路由来显示所有的图片,路由中需要传递图片的索引以及文件夹的名称参数。
2. 在路由函数中,获取索引和文件夹名称参数,并根据这些参数构造出图片的路径。然后使用Flask的`send_file`函数将图片发送给客户端。
3. 在HTML中,可以使用Python的Jinja2模板引擎来循环显示所有的图片。通过传递索引和文件夹名称参数,可以构造出每个图片的URL。
具体实现代码如下:
```python
from flask import Flask, send_file, render_template
app = Flask(__name__)
@app.route('/image/<int:idx>/<folder>/<filename>')
def get_image(idx, folder, filename):
path = f'static/images/{folder}/{idx}.{filename}'
return send_file(path, mimetype='image/png')
@app.route('/')
def index():
folders = range(1, 35)
return render_template('index.html', folders=folders)
if __name__ == '__main__':
app.run()
```
在HTML模板中,可以使用如下代码来循环显示所有的图片:
```html
{% for folder in folders %}
<h1>Folder {{ folder }}</h1>
<ul>
{% for idx in range(1, 11) %}
<li><img src="{{ url_for('get_image', idx=idx, folder=folder, filename='image.png') }}" alt=""></li>
{% endfor %}
</ul>
{% endfor %}
```
这个例子中,假设每个文件夹中有10张图片,图片的名称都是`image.png`。通过循环遍历每个文件夹和每个图片的索引,可以构造出每个图片的URL并在HTML中显示出来。
阅读全文