viewerjs+ts 多张图

ViewerJS是一个基于JavaScript的图片查看器库，它允许用户在一个网页上预览、缩放和滚动大量的图片。如果你想在TypeScript项目中集成ViewerJS并支持多张图片，你可以按照以下步骤操作：

1. 首先，确保你已经安装了Node.js和npm包管理器。如果你还没有，可以从官方网站下载并安装。

2. 安装ViewerJS和TypeScript的依赖。打开命令行，进入你的项目目录，运行：

   npm install viewerjs typescript --save

3. 创建一个tsconfig.json文件以启用TypeScript编译，并设置基本配置：

   {
     "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       "outDir": "./dist", // 输出目录
       "strict": true,
       "esModuleInterop": true
     },
     "include": ["src"]
   }

4. 在`src`目录下创建一个`viewer.html`或`index.ts`，引入ViewerJS库和使用TypeScript编写代码，例如：

   <script src="node_modules/viewerjs/build/viewer.min.js"></script>
   <script src="dist/index.js"></script> <!-- 或者直接使用import 'viewerjs'; -->

   import Viewer from 'viewerjs';

   const images = [
     './image1.jpg',
     './image2.jpg',
     './image3.jpg', // 添加你需要展示的所有图片路径
   ];

   images.forEach((imgSrc) => {
     new Viewer({
       container: document.getElementById('image-container'), // 图片容器ID
       sources: [imgSrc]
     });
   });

5. 使用`tsc`命令编译TypeScript到JavaScript，然后将生成的`index.js`或`dist/*`文件部署到服务器上。