当前位置：首页 > news >正文

2023.11.22使用flask做一个简单的图片浏览器

news 2026/5/14 2:37:14

功能：
实现图片浏览（翻页）功能

程序页面：
在这里插入图片描述

程序架构：
在这里插入图片描述

注意：在flask中常会使用src=“{{ url_for(‘static’, filename=‘images/’ + image) }}”，这段代码是在Flask框架中用于获取静态文件的URL的。在Flask中，静态文件通常存放在static文件夹中，比如CSS、JavaScript或者图片文件等。url_for(‘static’, filename=‘images/’ + image)这段代码会生成一个对应静态文件的URL，其中’static’是指定静态文件夹的名称，‘images/’ + image是指定文件夹中图片的路径。

如果image是一个变量，那么在渲染模板的时候就会根据实际的image的值来生成对应的URL。这个URL可以在前端页面中引用，用于加载静态图片文件。

注意静态文件夹如果要改变需要另外声明。

main.py

import os
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')@app.route('/preview', methods=['POST'])
def preview():image_name = request.form['image_name']image_dir = os.path.dirname(os.path.abspath(__file__)) + '/static/uploads'image_list = sorted(os.listdir(image_dir))current_index = image_list.index(image_name)prev_index = current_index - 1 if current_index > 0 else Nonenext_index = current_index + 1 if current_index < len(image_list) - 1 else Noneprev_image_name = image_list[prev_index] if prev_index is not None else Nonenext_image_name = image_list[next_index] if next_index is not None else Noneimage_url = f'/static/uploads/{image_name}'return render_template('preview.html', image_name=image_name, image_url=image_url, prev_image_name=prev_image_name, next_image_name=next_image_name)if __name__ == '__main__':app.run(debug=True)

preview.html

<!DOCTYPE html>
<html>
<head><title>Image Preview</title><link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script><style>body {padding: 20px;}img {height: 200px;width: 200px;}</style>
</head>
<body><h2>Image Preview: {{ image_name }}</h2><div><img src="{{ image_url }}" class="img-fluid" alt="Preview"></div><div class="btn-group mt-2" role="group" aria-label="Image Navigation"><form action="/preview" method="post">{% if prev_image_name %}<input type="hidden" name="image_name" value="{{ prev_image_name }}"><input type="submit" class="btn btn-primary" value="Prev">{% endif %}</form><form action="/preview" method="post">{% if next_image_name %}<input type="hidden" name="image_name" value="{{ next_image_name }}"><input type="submit" class="btn btn-primary" value="Next">{% endif %}</form></div>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head><title>Image Preview</title>
</head>
<body><h2>Enter Image Name</h2><form action="/preview" method="post"><input type="text" name="image_name" placeholder="Enter Image Name"><button type="submit">Preview</button></form>
</body>
</html>

2023.11.22使用flask做一个简单的图片浏览器

相关文章：

2023.11.22使用flask做一个简单的图片浏览器

万字解析设计模式之桥接模式、外观模式

常用系统函数

键盘控制ROS车运动

linux上交叉编译qt库

Nacos介绍与使用

网工内推 | 字节原厂，正式编，网络工程师，最高30K*15薪

Git 远程仓库(Github)

Mybatis Plus分页实现逻辑整理（结合芋道整合进行解析）

C#编程题分享（2）

Dockerfile基础

python+selenium实现web自动化（基础入门）

Spring Boot 自动配置

力扣labuladong一刷day13天双指针8道链表题

【剑指offer|图解|链表】链表的中间结点 + 链表中倒数第k个结点

被环境变量虐过一遍获得的启示

关于Hbase的一些问题

level=warning msg=“failed to retrieve runc version: signal: segmentation fault“

电力工作记录仪、智能安全帽、智能布控球助力智能电网建设

【CSS】各百分比透明度 opacity 对应的 16 进制颜色值（例如：#FFFFFF80）

购买腾讯云时最容易被忽略的痛点：配置、成本和运维闭环

为你的Nodejs后端服务快速集成大模型能力

斯坦福CS229机器学习中文教程：从零到一的实战学习指南

在Windows 10上搞定OpenPCDet：从KITTI数据集训练到自定义数据集的完整避坑指南

2025届毕业生推荐的六大AI科研网站实测分析

gRPC流量分析实战：用cursor-tap工具实现AI对话可视化与游戏集成

终极AI图像分层工具LayerDivider：3分钟完成复杂插画自动分层

如何彻底解决JavaScript浮点数精度问题：decimal.js完整指南

从Landsat 8数据到地表温度：劈窗算法实战解析

大疆智图+B3DM切片+Cesium：5分钟搞定倾斜摄影三维模型在线发布