前言

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