您现在的位置是：首页 >技术交流 >＜tauri＞＜rust＞＜GUI＞使用tauri创建一个图片浏览器（文件夹遍历、图片切换）网站首页技术交流

前言

本文是基于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;