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

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

news 2026/2/20 4:54:06

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

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

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

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

注意：在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做一个简单的图片浏览器 功能&#xff1a; 实现图片浏览&#xff08;翻页&#xff09;功能 程序页面&#xff1a; 程序架构&#xff1a; 注意&#xff1a;在flask中常会使用src“{{ url_for(‘static’, filename‘images/’ image) }}”&#xff0c…...

编程日记 2023/11/21 23:57:00

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

一、桥接模式 1.1概述 桥接模式是一种结构型设计模式&#xff0c;它的作用是将抽象部分和实现部分分离开来&#xff0c;使它们能够独立地变化。这样&#xff0c;抽象部分和实现部分可以分别进行扩展&#xff0c;而不会相互影响。它是用组合关系代替继承关系来实现&#xff0c;…...

编程日记 2023/11/21 23:54:58

常用系统函数

$clog2 clogb2 系统函数 $clog2 应返回参数以 2 为底的对数的上限&#xff08;对数四舍五入为整数值&#xff09;。参数可以是整数或任意大小的向量值。参数应被视为无符号值&#xff0c;参数值为 0 将产生结果 0。 该系统函数可用于计算对给定大小的存储器进行寻址所…...

编程日记 2023/11/21 23:52:56

键盘控制ROS车运动

键盘控制ROS车运动 上位机 使用pyseria库与stm32单片机进行通信控制 #!/usr/bin/env python # -*- coding: utf-8 -*import sys, select, termios, tty import serialmsg """ ---------------------------w a x ds w : x a : y s : -x …...

编程日记 2023/11/21 23:51:55

linux上交叉编译qt库

linux上交叉编译qt库 Qt程序从X86平台Linux移植到ARM平台Linux需要做什么 1.在ubuntu上使用qt的源码交叉编译出Qt库 2.将编译好的库拷贝到开发板上并设置相应的环境变量&#xff08;库路径啥的&#xff09; 前两步一劳永逸&#xff0c;做一次就行 3.X86上写好程序代码&…...

编程日记 2023/11/21 23:50:49

Nacos介绍与使用

Nacos介绍与使用 文章目录 Nacos介绍与使用一. 什么是Nacos1 Nacos功能1.1 配置中心1.2 注册中心 2.为什么要使用Nacos 二.Nacos 部署安装1. Nacos 部署方式2. Nacos 安装3. 配置数据源4. 开启控制台授权登录&#xff08;可选&#xff09; 三. Nacos配置中心的使用1. 创建配置信…...

编程日记 2023/11/21 23:49:47

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

01 字节跳动 招聘岗位&#xff1a;网络虚拟化高级研发工程师 职责描述&#xff1a; 1、负责字节跳动虚拟网络产品的研发&#xff0c;包括但不局限于网络VPC、NAT、LB负载均衡等&#xff1b; 2、负责字节跳动网络基础平台的研发&#xff0c;包括但不局限于网络控制面系统、容器…...

编程日记 2023/11/21 23:48:46

Git 远程仓库(Github)

目录 添加远程库 查看当前的远程库 提取远程仓库 推送到远程仓库 删除远程仓库 Git 并不像 SVN 那样有个中心服务器。 目前我们使用到的 Git 命令都是在本地执行&#xff0c;如果你想通过 Git 分享你的代码或者与其他开发人员合作。 你就需要将数据放到一台其他开发人员…...

编程日记 2023/11/21 23:47:45

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

Mybatis Plus分页实现逻辑整理&#xff08;结合芋道整合进行解析&#xff09; 我希望如春天般的你&#xff0c;身着白色的婚纱&#xff0c;向我奔赴而来&#xff0c;我愿意用全世界最温情的目光&#xff0c;朝着你的方向望去——姗姗来迟。 1.背景介绍 https://baomidou.com/p…...

编程日记 2023/11/21 23:46:43

C#编程题分享（2）

输出所有整数的和 让⽤户输⼊整数&#xff0c;如果⽤户输⼊的不是0&#xff0c;就继续输⼊&#xff0c;如果输⼊的是0&#xff0c;结束整数&#xff0c;并输出所有整数的和。 Console.WriteLine("请输⼊⼀个整数&#xff1a;"); int n; int sum 0; do {n Convert…...

编程日记 2023/11/21 23:45:42

Dockerfile基础

前言 知识点整理 Dockerfile 简介 它是一个没有后缀名的文本文档&#xff0c;里面是组合镜像的一些命令&#xff0c;Docker build命令构建镜像时&#xff0c;通过读取Dockerfile中的指令的顺序&#xff08;自上到下&#xff09;自动生成镜像。 Dockerfile 命令 1. FROM 指…...

编程日记 2023/11/21 23:44:41

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

selenium 是一个自动化操控工具&#xff0c;支持对web端进行自动化操控&#xff0c;从而实现自动化测试。 相关文档&#xff1a; https://python-selenium-zh.readthedocs.io/zh-cn/latest/https://www.selenium.dev/documentation/ 安装配置 环境依赖&#xff1a; python…...

编程日记 2023/11/21 23:43:39

Spring Boot 自动配置

1. Spring Boot 自动配置 Spring Boot的自动配置是其核心特性之一&#xff0c;旨在简化Spring应用程序的配置过程。这个特性通过合理的默认值以及根据类路径和其他因素自动配置Spring Beans来极大地减少了配置的工作量。以下是Spring Boot自动配置的详细讲解&#xff1a; 基本…...

编程日记 2023/11/21 23:42:38

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

力扣labuladong一刷day13天双指针7道链表题 一、21. 合并两个有序链表 题目链接&#xff1a;https://leetcode.cn/problems/merge-two-sorted-lists/ 思路&#xff1a;合并只需要新new一个虚拟头结点&#xff0c;然后遍历比较两个链表把较小的那一个顺序接在虚拟头结点后面。…...

编程日记 2023/11/21 23:41:37

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

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、算法模板 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️链表的中间结点二. ⛳️链表中倒数第k个结点&#x1f4dd;结语 &#x1f4c…...

编程日记 2023/11/21 23:40:36

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

Oracle数据库环境存在两个数据库版本12C及19C&#xff0c;在执行一些操作时需要设置对应版本的环境变量 计划登录12C环境&#xff0c;于是按如下方式设置环境变量 export ORACLE_BASE/u01/app/oracle export ORACLE_HOME$ORACLE_HOME/product/12.2.0/dbhome_1 export ORACLE_S…...

编程日记 2023/11/21 23:39:35

关于Hbase的一些问题

HBase 1. RowKey如何设计&#xff0c;设计不好会产生什么后果 唯一原则&#xff1a;在设计上要保持RowKey的唯一性。 因为HBase中的数据是以KV的格式来存储的&#xff0c;所以如果向同一张表中插入RowKey相同的数据&#xff0c;旧的数据会被覆盖掉。 长度原则&#xff1a;建…...

编程日记 2023/11/21 23:38:34

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

安装docker启动后&#xff0c;发现里面没有runc版本信息 目前看是少了runc组件 那我们安装runc https://github.com/opencontainers/runc/releases/download/v1.1.10/runc.amd64 [rootlocalhost ~]# mv runc.amd64 /usr/bin/runc mv&#xff1a;是否覆盖"/usr/bin/runc&q…...

编程日记 2023/11/21 23:37:32

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

电力行业的建设和发展是国家经济发展的重要支撑&#xff0c;而智能电网作为电力系统的重要组成部分&#xff0c;它的安全高效运行关乎到整个电力系统乃至民生的稳定和安全。为了加快国家经济的发展以及满足人们对电力的需求和用电可靠性的要求&#xff0c;国家早在十二规划中就…...

编程日记 2023/11/21 23:36:31

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

文章目录 使用&#xff1a;6位颜色值2位透明度值 color: #000000D4; /* 等价于 */ color: #000000; opacity : 0.83; /* 等价于 */ color: #000000; opacity : 83%; 对照表&#xff08;0&#xff1a;完全透明&#xff0c;1&#xff1a;不透明&#xff09; 透明度值百分百值十…...

编程日记 2023/11/21 23:34:29

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/18 8:58:45

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/19 22:17:08

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2026/2/1 7:05:07

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13