使用Python和Flask框架创建一个简单的网页,将本地文件夹中的图片展示出来。下面是一个完整的案例:
1. 安装依赖
pip install Flask
2. 项目结构
你的项目结构应该类似于以下:
/project-folder
│
├── app.py
├── static
│ └── images
│ ├── image1.jpg
│ ├── image2.png
│ └── ...
└── templates
└── index.html
- app.py:Flask应用的主文件。
- static/images:存放图片的文件夹。
- templates/index.html:HTML模板文件。
3. 编写Flask应用
在app.py文件中编写以下代码:
from flask import Flask, render_template
import os
app = Flask(__name__)
@app.route('/')
def index():
# 获取static/images文件夹中的所有图片文件名
image_folder = os.path.join('static', 'images')
images = os.listdir(image_folder)
# 只保留常见的图片文件格式
images = [img for img in images if img.endswith(('.jpg', '.png', '.jpeg', '.gif', '.bmp'))]
return render_template('index.html', images=images)
if __name__ == '__main__':
app.run(debug=True)
4. 编写HTML模板
在templates/index.html文件中编写以下代码:
添加以下CSS和JS代码,以实现自适应大小和懒加载:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
img {
max-width: 200px;
max-height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div style="display: flex; flex-wrap: wrap;">
{% for image in images %}
<div style="margin: 10px;">
<img data-src="{{ url_for('static', filename='images/' + image) }}"
alt="{{ image }}"
style="max-width: 200px; max-height: 200px; object-fit: cover;"
class="lazy"/>
</div>
{% endfor %}
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for browsers without IntersectionObserver
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
});
}
});
</script>
</body>
</html>
说明
- CSS:设置了object-fit: cover;,确保图片按比例缩放并覆盖显示区域,而不会被拉伸或变形。
- 懒加载:使用IntersectionObserver API实现懒加载,只有当图片出现在用户视野内时才加载图片。 图片压缩工具
你可以使用以下工具来压缩图片:
- TinyPNG
- ImageMagick (用于批量处理)
- Squoosh (在线工具,支持多种格式)
通过这些方法,你可以更好地在网页上展示大图片,提高用户体验。
5. 运行Flask应用
python app.py
启动应用后,打开浏览器并访问http://127.0.0.1:5000/,你就可以看到图片展示在网页上了。
这个简单的案例展示了如何使用Flask将本地文件夹中的图片展示到网页上。如果你有更多的需求,比如分页、图片缩略图、点击放大查看等,可以进一步扩展代码。