加载本地图片到网页上面去

weixin_45734021

于 2024-08-20 18:38:32 发布

阅读量128

点赞数 4

文章标签： python flask css html5

本文链接：https://blog.csdn.net/weixin_45734021/article/details/141365509

版权

使用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>