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

＜tauri＞＜rust＞＜GUI＞使用tauri创建一个图片浏览器（文件夹遍历、图片切换）

news 来源：原创 2025/7/2 13:04:15
前言

本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。

环境配置
  • 系统：windows 10
  • 平台：visual studio code
  • 语言：rust、javascript
  • 库：tauri2.0
概述

本文是在前文的基础上，实现一个图片浏览器，要实现的功能是如何从遍历本地文件夹获取图片文件并在页面显示。

前提准备

本文涉及到tauri的dialog插件，需要安装

npm run tauri add dialog
1、创建前端项目

可以参考我之前的博文，本文不再赘述：
1、＜tauri＞＜rust＞＜GUI＞基于rust和tauri，在已有的前端框架上手动集成tauri示例
2、＜tauri＞＜rust＞＜GUI＞基于rust和tauri的图片显示程序（本地图片的加载、显示、保存）

本文的目的是实现一个图片浏览器，使用需要修改页面布局，我们创建一个imagebrowser.html：

<div class="imgbrowser" ><button class="arrow left" id="leftarrowbtn">&#10094;</button><img id="mainImage" src="" alt="Main Image"><button class="arrow right" id="rightarrowbtn" >&#10095;</button>
</div>
<div id="thumbnails"></div>

为了管理清晰，我们在public文件下，为资源进行归类，将html文件都放到pages文件夹下，而css文件都放到css文件夹下，我们为新的布局添加新的样式：

#mainImage {width: 600px;height: 400px;margin: 20px auto;display: block;object-fit: cover;border:1px solid black;
}
#thumbnails {display: flex;justify-content: center;margin-top: 20px;
}
.thumbnail {width: 100px;height: 100px;

相关文章：

＜tauri＞＜rust＞＜GUI＞使用tauri创建一个图片浏览器（文件夹遍历、图片切换）

前言 本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。 环境配置 系统：windows 10平台：visual studio code语言：rust、javascript库：tauri2.0概述 本文是…...

编程日记 2025/7/2 13:04:15

【STM32系列】利用MATLAB配合ARM-DSP库设计IIR数字滤波器（保姆级教程）

ps.源码放在最后面 设计FIR数字滤波器可以看这里&#xff1a;利用MATLAB配合ARM-DSP库设计FIR数字滤波器&#xff08;保姆级教程&#xff09; 设计IIR滤波器 MATLAB配置 设计步骤 首先在命令行窗口输入"filterDesigner"&#xff0c;接着就会跳出以下界面&#xf…...

编程日记 2025/7/1 0:48:06

迷宫（信息学奥赛一本通-1215）

【题目描述】 一天Extense在森林里探险的时候不小心走入了一个迷宫&#xff0c;迷宫可以看成是由nn的格点组成&#xff0c;每个格点只有2种状态&#xff0c;.和#&#xff0c;前者表示可以通行后者表示不能通行。同时当Extense处在某个格点时&#xff0c;他只能移动到东南西北(或…...

编程日记 2025/7/2 13:32:11

centos7 curl#6 - Could not resolve host mirrorlist.centos.org； 未知的错误 解决方案

问题描述 centos7系统安装完成后&#xff0c;yum安装软件时报错“curl#6 - “Could not resolve host: mirrorlist.centos.org; 未知的错误”” [root192 ~]# yum install vim -y 已加载插件&#xff1a;fastestmirror Determining fastest mirrors Could not retrieve mirro…...

编程日记 2025/7/2 13:34:33

Ubuntu安装PgSQL17

参考官网教程&#xff0c;Ubuntu24 apt在线安装Postgres 17 1. 要手动配置 Apt 存储库 # 导入存储库签名密钥&#xff1a; sudo apt install curl ca-certificates sudo install -d /usr/share/postgresql-common/pgdg sudo curl -o /usr/share/postgresql-common/pgdg/apt…...

编程日记 2025/7/2 11:15:06

在 Navicat 17 中扩展 PostgreSQL 数据类型 - 范围类型

范围类型 PostgreSQL 是市场上最灵活的数据库之一&#xff0c;这已不是什么秘密。事实上&#xff0c;PostgreSQL 的可扩展性和丰富的功能集使 PostgreSQL 近期已超越 MySQL&#xff0c;成为最受开发人员推崇和最受欢迎的数据库系统。在这个使用 Navicat Premium 17 在 Postgre…...

编程日记 2025/7/1 0:50:28

VMware Workstate 的 Ubuntu18 安装 vmware tools（不安装没法共享）

在共享主机路径后&#xff0c;可以在&#xff1a; /mnt/hgfs/下方找到共享的文件。但没有安装vmware tool时是没法共享的。 如何安装vmware tool&#xff0c;网上版本很多。这里记录一下&#xff1a; VMware Workstation 17 Pro&#xff0c;版本&#xff1a;17.6.0 虚拟机系统…...

编程日记 2025/7/2 14:01:05

稀土抑烟剂——为汽车火灾安全增添防线

一、稀土抑烟剂的基本概念 稀土抑烟剂是一类基于稀土元素&#xff08;如稀土氧化物和稀土金属化合物&#xff09;开发的高效阻燃材料。它可以显著提高汽车内饰材料的阻燃性能&#xff0c;减少火灾发生时有毒气体和烟雾的产生。稀土抑烟剂不仅能提升火灾时的安全性&#xff0c;…...

编程日记 2025/6/30 12:29:24

【工业安全】-CVE-2019-17621-D-Link Dir-859L 路由器远程代码执行漏洞

文章目录 1.漏洞描述 2.环境搭建 3.漏洞复现 4.漏洞分析　 4.1&#xff1a;代码分析　 4.2&#xff1a;流量分析 5.poc代码&#xff1a; 1.漏洞描述 漏洞编号&#xff1a;CVE-2019-17621 漏洞名称&#xff1a;D-Link DIR-859 命令注入漏洞 威胁等级&#xff1a;严重 漏洞详…...

编程日记 2025/7/2 14:49:31

git 记录

git 记录 报错warning: unknown value given to http.version: 2 报错 warning: unknown value given to http.version: ‘2’ 删除指定http版本 git config --global --unset http.version...

编程日记 2025/7/2 14:04:21

MVC（Model-View-Controller）framework using Python ,Tkinter and SQLite

1.项目结构 sql: CREATE TABLE IF NOT EXISTS School (SchoolId TEXT not null, SchoolName TEXT NOT NULL,SchoolTelNo TEXT NOT NULL) 整体思路 Model&#xff1a;负责与 SQLite 数据库进行交互&#xff0c;包括创建表、插入、删除、更新和查询数据等操作。View&#xff1…...

编程日记 2025/7/2 15:17:47

算法——数学建模中的“上帝掷骰子”：蒙特卡罗算法

一、从原子弹到《原神》&#xff1a;随机算法的封神之路 1946年洛斯阿拉莫斯实验室&#xff0c;冯诺伊曼团队用掷骰子的方式&#xff0c;成功预测了氢弹的中子扩散——这是蒙特卡罗算法首次震惊世界。 2023年《原神》物理引擎&#xff0c;角色技能特效的光线追踪计算&#xff…...

编程日记 2025/7/2 4:32:45

洗牌加速！车规MCU“冷热交加”

汽车芯片赛道&#xff0c;正在经历新一轮震荡期。 本周&#xff0c;全球汽车芯片巨头—NXP对外披露了不及资本市场预期的四季度的财报&#xff0c;营收同比下降9%&#xff0c;全年下降5%&#xff0c;表明工业和汽车市场需求的低迷仍在持续。 公开信息显示&#xff0c;该公司一…...

编程日记 2025/6/30 20:25:20

面试整理-Java中常见创建线程池的方法

使用 ​​Executors​​ 工具类 ​​Executors.newFixedThreadPool(int nThreads)​​ 特点&#xff1a;创建一个固定大小的线程池&#xff0c;线程池中的线程数始终保持不变。 适用场景&#xff1a;适用于任务量已知且相对固定的场景&#xff0c;可以有效控制资源的使用。​​…...

编程日记 2025/6/30 1:32:47

计算机毕业设计——springboot教师人事档案管理系统

&#x1f4d8; 博主小档案&#xff1a; 花花&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 花花在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于java、python等技术。近年来&#xff0c;花花更…...

编程日记 2025/7/2 7:04:43

ASP.NET Core程序的部署

发布 不能直接把bin/Debug部署到生产环境的服务器上&#xff0c;性能低。应该创建网站的发布版&#xff0c;用【发布】功能。两种部署模式&#xff1a;“框架依赖”和“独立”。独立模式选择目标操作系统和CPU类型。Windows、Linux、iOS&#xff1b;关于龙芯。 网站的运行 在…...

编程日记 2025/7/2 9:32:49

Python练习11-20

题目&#xff1a;古典问题&#xff1a;有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第三个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问每个月的兔子总数为多少&#xff1f; 题目&#xff1a;判断101-200之间有多少…...

编程日记 2025/6/30 20:24:09

【Android开发AI实战】选择目标跟踪基于opencv实现——运动跟踪

文章目录 【Android 开发 AI 实战】选择目标跟踪基于 opencv 实现 —— 运动跟踪一、引言二、Android 开发与 AI 的融合趋势三、OpenCV 简介四、运动跟踪原理&#xff08;一&#xff09;光流法&#xff08;二&#xff09;卡尔曼滤波&#xff08;三&#xff09;粒子滤波 五、基于…...

编程日记 2025/6/30 20:24:44

深入浅出：Python 中的异步编程与协程

引言 大家好&#xff0c;今天我们来聊聊 异步编程 和 协程&#xff0c;这是近年来编程语言领域中的热点话题之一&#xff0c;尤其在 Python 中&#xff0c;它作为一种全新的编程模型&#xff0c;已经成为处理 IO密集型 任务的强力工具。尽管很多人对异步编程望而却步&#xff0…...

编程日记 2025/7/2 14:49:31

iOS Swift算法之KDF2

后端用Java开发的&#xff0c;用到了org.bouncycastle.crypto.generators.KDF2BytesGenerator&#xff0c;一开始在网上各种搜&#xff0c;没找到相关的接口或第三方库&#xff0c;白白浪费了几天时间&#xff0c;后面才想到照着Java代码自己实现&#xff0c;于是乎参考BaseKDF…...

编程日记 2025/6/28 11:42:47

PyQt6/PySide6 QImage 类

PyQt6/PySide6 QImage 类详解 一、QImage 概述 QImage 是 Qt 框架中用于处理图像数据的核心类&#xff0c;提供&#xff1a; 独立于硬件的图像表示像素级访问和操作多种图像格式支持&#xff08;PNG/JPEG/BMP等&#xff09;图像转换和基本处理功能 from PyQt6.QtGui import…...

编程日记 2025/7/2 15:10:26

Java8新特性Optional,Function,Supplier,Consumer

Java8新特性 1.Optional 首先&#xff0c;Optional 它不是一个函数式接口&#xff0c;设计它的目的是为了防止空指针异常&#xff08;NullPointerException&#xff09;&#xff0c;要知道在 Java 编程中&#xff0c; 空指针异常可是臭名昭著的。 让我们来快速了解一下 Opti…...

编程日记 2025/7/1 7:18:44

腾讯云服务器中Ubuntu18.04搭建python3.7.0与TensorFlow1.15.0与R-4.0.3环境

所有踩过的坑&#xff0c;都化成了这条平坦的路 云服务器配置 基础配置选择竞价实例&#xff08;便宜/需求小&#xff09; 选择地区&#xff08;距离自己近的就行&#xff09; 实例配置选择异构计算&#xff08;能力较强&#xff0c;性价比高&#xff09;根据GPU显存需求选择…...

编程日记 2025/7/2 13:47:09

01.Docker 概述

Docker 概述 1. Docker 的主要目标2. 使用Docker 容器化封装应用程序的意义3. 容器和虚拟机技术比较4. 容器和虚拟机表现比较5. Docker 的组成6. Namespace7. Control groups8. 容器管理工具9. docker 的优缺点10. 容器的相关技术 docker 官网: http://www.docker.com 帮助文档…...

编程日记 2025/7/2 12:37:04

DedeBIZ系统审计小结

之前简单审计过DedeBIZ系统&#xff0c;网上还没有对这个系统的漏洞有过详尽的分析&#xff0c;于是重新审计并总结文章&#xff0c;记录下自己审计的过程。 https://github.com/DedeBIZ/DedeV6/archive/refs/tags/6.2.10.zip &#x1f4cc;DedeBIZ 系统并非基于 MVC 框架&…...

编程日记 2025/7/2 13:25:23

docker运行perplexica

序 本文主要研究一下如何用docker运行perplexica 步骤 git clone git clone https://github.com/ItzCrazyKns/Perplexica.gitapp.dockerfile FROM docker.1ms.run/node:20.18.0-alpineARG NEXT_PUBLIC_WS_URLws://127.0.0.1:3001 ARG NEXT_PUBLIC_API_URLhttp://127.0.0.1…...

编程日记 2025/6/30 21:48:50

【ThreeJS Basics 1-3】Hello ThreeJS，实现第一个场景

文章目录 环境创建一个项目安装依赖基础 Web 页面概念解释编写代码运行项目 环境 我的环境是 node version 22 创建一个项目 首先&#xff0c;新建一个空的文件夹&#xff0c;然后 npm init -y , 此时会快速生成好默认的 package.json 安装依赖 在新建的项目下用 npm 安装依…...

编程日记 2025/6/30 21:47:25

解决珠玑妙算游戏问题：C 语言实现

一、引言 珠玑妙算游戏&#xff08;the game of master mind&#xff09;是一个有趣的逻辑推理游戏。在编程领域&#xff0c;我们可以通过编写代码来模拟游戏中计算猜中与伪猜中次数的过程。本文将详细介绍如何使用 C 语言实现这一功能&#xff0c;并对核心代码进行解析。 二、…...

编程日记 2025/7/1 16:08:23

【清晰教程】本地部署DeepSeek-r1模型

【清晰教程】通过Docker为本地DeepSeek-r1部署WebUI界面-CSDN博客 目录 Ollama 安装Ollama DeepSeek-r1模型 安装DeepSeek-r1模型 Ollama Ollama 是一个开源工具&#xff0c;专注于简化大型语言模型&#xff08;LLMs&#xff09;的本地部署和管理。它允许用户在本地计算机…...

编程日记 2025/7/2 0:18:06

Java/Kotlin 使用 Chrome 无头浏览器

1. 概念 无头浏览器在类似于流行网络浏览器的环境中提供对网页的自动控制&#xff0c;但是通过命令行界面或使用网络通信来执行。 它们对于测试网页特别有用&#xff0c;因为它们能够像浏览器一样呈现和理解超文本标记语言&#xff0c;包括页面布局、颜色、字体选择以及JavaSc…...

编程日记 2025/6/30 10:47:11

AI前端开发：赋能开发者，提升解决实际问题的能力

近年来&#xff0c;人工智能技术飞速发展&#xff0c;深刻地改变着各行各业。在软件开发领域&#xff0c;AI写代码工具的出现更是引发了一场革命&#xff0c;尤其是前端开发领域&#xff0c;AI的应用正在显著提升开发者的解决实际问题的能力。本文将探讨AI前端开发如何提升效率…...

编程日记 2025/6/30 1:38:47

【Elasticsearch】Elasticsearch检索方式全解析：从基础到实战（二）

接着上一篇文章&#xff1b;我们继续来研究es的复杂检索 文章目录 (1) bool用来做复合查询&#xff08;2&#xff09;Filter【结果过滤】&#xff08;3&#xff09;term&#xff08;4&#xff09;Aggregation&#xff08;执行聚合&#xff09; (1) bool用来做复合查询 复合语…...

编程日记 2025/6/29 23:24:28

ASP.NET Core SignalR的分布式部署

假设聊天室程序被部署在两台服务器上&#xff0c;客户端1、2连接到了服务器A上的ChatRoomHub&#xff0c;客户端3、4连接到服务器B上的ChatRoomHub&#xff0c;那么客户端1发送群聊消息时&#xff0c;只有客户端1、2能够收到&#xff0c;客户端3、4收不到&#xff1b;在客户端3…...

编程日记 2025/6/30 16:28:14

kafka的架构和工作原理

目录 Kafka 架构 Kafka 工作原理 Kafka 数据流 Kafka 核心特性 总结 Kafka 架构 1. 生产者（Producer） 2. 消费者（Consumer） 3. 主题（Topic） 4. 分区（Partition） 5. 副本（Replica） 6. 代理（Broker） 7. ZooKeeper（旧版本）/KRaft（新版本） Kafka 工作…...

编程日记 2025/6/30 16:27:03

当没有OpenGL时，Skia如何绘制？

Skia 是可以在没有 OpenGL 的情况下进行图形绘制的&#xff0c;但是具体能否成功绘制图形&#xff0c;取决于 Skia 是如何配置的&#xff0c;以及平台上是否提供了其他的底层图形 API。 Skia 的底层依赖 Skia 的目标是提供一种跨平台的 2D 图形绘制接口。为了加速图形渲染&…...

编程日记 2025/7/1 5:40:41

Java小白入门基础知识（一）

1.初识Java java源程序通过javac 编译生成字节码文件&#xff0c;通过java命令运行java程序 总结&#xff1a; 1&#xff09;在一个Java文件中&#xff0c;只能有一个public class 2&#xff09;public class一定要和文件名一致 3&#xff09;类里面包含方法 4&#xff09…...

编程日记 2025/6/30 1:34:27

游戏内常见加密

加密只是增大破解难度&#xff0c;没法说绝对安全&#xff0c;避免过度加密导致性能消耗过大。 通用算法库 lua的加密算法库&#xff1a;https://github.com/somesocks/lua-lockbox/tree/master 比如通信协议就用到里面一些算法cry.encrypt 算法优劣&#xff1a;AES加解密-CBC…...

编程日记 2025/6/30 16:26:28

【Java八股文】02-Java集合面试篇

【Java八股文】02-Java集合面试篇 概念数组与集合区别常用集合Java中的线程安全的集合是什么&#xff1f;Collections和Collection的区别 Listjava中list的几种实现把ArrayList变成线程安全的有哪些方法&#xff1f;CopyOnWriteArrayList是如何保证线程安全的&#xff1f; Mapj…...

编程日记 2025/6/30 16:27:38

springCloud-2021.0.9 之 GateWay 示例

文章目录 前言springCloud-2021.0.9 之 GateWay 示例1. GateWay 官网2. GateWay 三个关键名称3. GateWay 工作原理的高级概述4. 示例4.1. POM4.2. 启动类4.3. 过滤器4.4. 配置 5. 启动/测试 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收…...

编程日记 2025/6/30 16:26:10

公然上线传销项目，Web3 的底线已经被无限突破

作者&#xff1a;Techub 热点速递 撰文&#xff1a;Yangz&#xff0c;Techub News 今天早些时候&#xff0c;OKX 将上线 PI 的消息在圈内引起轩然大波&#xff0c;对于上线被板上钉钉为传销盘子的「项目」 &#xff0c;Techub News 联系了 OKX 公关&#xff0c;但对方拒绝置评…...

编程日记 2025/6/30 16:26:46

SQL数据清理：去除字段值中的多余符号（Demo例子）

目录 前言1. 基础2. 进阶 前言 Excel中有大量不合法的符号&#xff0c;导入到系统之后&#xff0c;数据库有很多脏数据&#xff0c;对此下述展开sql的清洗教程 在数据库的文本字段中&#xff0c;可能会存在多余的逗号或符号&#xff0c;如,销售,, 或 二手车,销售,,这种情况 希…...

编程日记 2025/7/1 6:21:28

MongoDB 的使用场景

一、内容管理系统 1. 博客平台 文章内容、作者信息、标签、评论等数据结构多样&#xff0c;MongoDB 的无模式特性可轻松应对。比如 WordPress 等博客系统&#xff0c;使用 MongoDB 能灵活存储不同格式和长度的文章内容&#xff0c;以及与文章相关的各种元数据。 2. 新闻网站…...

编程日记 2025/7/1 15:02:33

STM32 RTC 实时时钟说明

目录 背景 RTC(实时时钟)和后备寄存器 32.768HZ 如何产生1S定时 RTC配置程序 第一次上电RTC配置 第1步、启用备用寄存器外设时钟和PWR外设时钟 第2步、使能RTC和备份寄存器访问 第3步、备份寄存器初始化 第4步、开启LSE 第5步、等待LSE启动后稳定状态 第6步、配置LSE为…...

编程日记 2025/7/2 4:13:58

微服务SpringCloud Alibaba组件nacos教程【详解naocs基础使用、服务中心配置、集群配置，附有案例+示例代码】

一.Nacos教程 文章目录 一.Nacos教程1.1 Nacos简介1.2 nacos基本使用直接下载打包服务源码方式启动 1.3 创建nacos客服端1.4 nacos集群配置1.5 nacos配置中心 1.1 Nacos简介 nacos是spring cloud alibaba生态中非常重要的一个组件&#xff0c;它有两个作用&#xff1a; 1:注册…...

编程日记 2025/7/2 13:16:11

深度整理总结MySQL——Expalin指南(二)

Expalin指南(二 前言Extrano tables usedImpossible whereNo matching min/max rowUsing indexUsing index conditionUsing whereUsing join buffer (Block Nested Loop)Not existsUsing intersect(...)、Using union(...)和Using sort_union(...)Zero limitUsing filesortUsin…...

编程日记 2025/6/28 12:18:18

【机器学习】常见采样方法详解

在机器学习领域&#xff0c;数据采样&#xff08;Sampling&#xff09;是一项至关重要的技术。它不仅影响模型的训练效率&#xff0c;还直接关系到模型的性能与泛化能力。本文将从基础概念出发&#xff0c;逐步深入介绍机器学习中常见的采样方法&#xff0c;帮助读者全面理解并…...

编程日记 2025/6/28 12:18:07

Kubernetes 最佳实践：Top 10 常见 DevOps/SRE 面试问题及答案

1. 如何在 Kubernetes 中设置资源请求和限制&#xff1f; 资源请求确保容器有最小资源量&#xff08;CPU/内存&#xff09;&#xff0c;而限制则强制容器消耗的最大资源量。这有助于高效资源分配并防止资源争用。 示例&#xff1a; resources:requests:memory: "256Mi&…...

编程日记 2025/7/2 4:09:07

Python自动化办公之Excel拆分

在日常办公中&#xff0c;我们经常需要将包含多个Sheet页的Excel文件拆分成多个独立的Excel文件。例如&#xff0c;当我们要把一份Excel表格发给各部门确认时&#xff0c;出于控制信息知悉范围、确保数据保密性等方面的考虑&#xff0c;每个部门仅需查看和确认与自己部门对应的…...

编程日记 2025/6/28 13:19:37

Mac上搭建宝塔环境并部署PHP项目

安装Docker Desktop》搭建Centos版本的宝塔环境》部署PHP项目 1. 下载Docker for mac 软件&#xff1a;https://www.docker.com/ 或使用终端命令&#xff1a;brew install --cask --appdir/Applications docker 2. 使用命令安装宝塔环境的centos7系统&#xff1a; docker pul…...

编程日记 2025/7/2 8:03:19

qt 控件的焦点事件

在 Qt 中&#xff0c;设置焦点策略是通过 QWidget 的 setFocusPolicy() 方法来实现的。焦点策略控制了一个控件何时和如何获取焦点。Qt 提供了几种常见的焦点策略&#xff0c;以帮助管理控件的焦点行为。 常见的焦点策略 Qt::NoFocus&#xff1a;控件不接受焦点。Qt::TabFocus&…...

编程日记 2025/6/28 6:13:19