# @capacitor-community/photoviewer 中文文档 规范地址：https://npmcn.com/package/%40capacitor-community/photoviewer/ 版本：8\.0\.1 npm 元数据更新时间：2026-10-23T21:47:54.598Z 中文译文更新时间：2026-11-09T05:20:31.676Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40capacitor-community/photoviewer 原文对照：https://npmcn.com/package/%40capacitor-community/photoviewer/?lang=original 项目主页：https://github.com/capacitor-community/photoviewer#readme 源码仓库：https://github.com/capacitor-community/photoviewer ## 关键信息（来自 npm 元数据） - 包体积（解压后）：256 kB，78 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：@capacitor/core \>=8\.0\.0 - 首次发布：2021-03-02T13:35:41.097Z - 最新版本发布：2026-06-03T16:21:42.693Z - 近 30 天下载量：7884（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：53（近 12 个月 2 个） ## 中文简介 具有全屏和共享能力的 PhotoViewer 表格图像 ## 安装 ```sh npm install @capacitor-community/photoviewer ``` 也可以使用：`pnpm add @capacitor-community/photoviewer`、`yarn add @capacitor-community/photoviewer`、`bun add @capacitor-community/photoviewer` ## README ![](https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png) ### 摄影师 **`@capacitor-community/photoviewer`** Web 和 原生相片查看器的电容社区插件, 允许打开全屏 \- 从带有缩放和共享功能的图片网格中选择的图片. \- 一张有放大和分享功能的相片. 图片可以通过图像web url,base64数据或内部设备为iOS和Android相接. \- iOS系统 - **`file:///var/mobile/Media/DCIM/100APPLE/YOUR_IMAGE.JPG`** - **`capacitor://localhost/_capacitor_file_/var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/Documents/photo1.jpg`** \- Android - 机器人 - 机器人 - Android - **`file:///sdcard/DCIM/YOUR_IMAGE.JPG`** - **`file:///sdcard/Pictures/YOUR_IMAGE.JPG`** - **`http://localhost/_capacitor_file_/storage/emulated/0/Pictures/JPEG_20221001_113835_7582877022250987909.jpg`** 在 iOS 插件上,从存储在 **所有照片** 文件夹现已可用. ![](https://img.shields.io/maintenance/yes/2025?style=flat-square) [![](https://img.shields.io/npm/l/@capacitor-community/photoviewer?style=flat-square)](https://www.npmjs.com/package/@capacitor-community/photoviewer) [![](https://img.shields.io/npm/dw/@capacitor-community/photoviewer?style=flat-square)](https://www.npmjs.com/package/@capacitor-community/photoviewer) [![](https://img.shields.io/npm/v/@capacitor-community/photoviewer?style=flat-square)](https://www.npmjs.com/package/@capacitor-community/photoviewer) [![](https://img.shields.io/badge/all%20contributors-8-orange?style=flat-square)](https://npmcn.com/package/%40capacitor-community/photoviewer/#readme-contributors-) ## 维护者 | 维护者 | GitHub 图像 | 社会 | | :-- | :-- | :-- | | 罗宾·根兹 | [抢劫](https://github.com/robingenz) | [@robin genz (中文(简体) )](https://twitter.com/robin_genz) | ## 浏览器支持 插件遵循来自 `Capacitor Team`, (中文(简体) ), - [Capacitor 浏览器支持](https://capacitorjs.com/docs/v3/web#browser-support) 意思是,如果没有额外的 JavaScript 转换, 它将无法在 IE11 中工作, 例如: [宝贝](https://babeljs.io/)。 。 。 . ## 安装 ```bash npm install @capacitor-community/photoviewer npx cap sync ``` 自3.0.4版本以来 `capacitor.config.ts` 添加图像位置,将从 HTTP 请求下载的图像保存到内部磁盘. ```ts const config: CapacitorConfig = { ... plugins: { PhotoViewer: { iosImageLocation: 'Library/Images', androidImageLocation: 'Files/Images', } } ... }; export default config; ``` ### iOS系统 - 在 Xcode 中,打开 `Info.plist` 并添加新的信息属性, 如 `Privacy - Photo Library Usage Description` 设置值为 `We need to write photos`。这需要具备 `Share`图像和图像 `create Movie` 工作时. ### 机器人 - 编辑 `res` 工程文件夹打开 `file_paths.xml` 文件并添加 ```xml ``` - 打开 `build.gradle (Project:android)` 并确保 `kotlin` 声明 ```js ... buildscript { ext.kotlin_version = '1.9.25' dependencies { ... classpath 'com.android.tools.build:gradle:8.8.1' classpath 'com.google.gms:google-services:4.4.2' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } } ... ``` - 打开 `build.gradle (Module: android.app)` 并做下列工作: - 之后 `apply plugin: 'com.android.application'` 添加 ``` apply plugin: 'kotlin-android' apply plugin: 'kotlin-kapt' ``` - 输入 `android` 块添加 ``` buildFeatures { dataBinding = true } ``` - 输入 `repositories` 块添加 ``` maven { url 'https://jitpack.io' } ``` - 输入 `dependencies` 块添加 ``` implementation "androidx.core:core-ktx:1.15.0" implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" ``` - 现在跑 `Sync Project with Gradle Files` 你准备好了. ### PWA网络 插件与相伴的 Stencil 组件一起工作 `jeep-photoviewer`。 。 。 . 一定要安装 ``` npm install --save-dev jeep-photoviewer@latest ``` ### 构建您的应用程序 当你的应用程序准备好了 ```bash npm run build npx cap copy npx cap copy web npx cap open android // Android npx cap open ios // iOS npm run serve // Web ``` ## 支持的方法 | 名称 | 机器人 | iOS系统 | 电子 | 网页 | | :-- | :-- | :-- | :-- | :-- | | 回声 | ✅ | ✅ | ❌ | ✅ | | 显示 | ✅ | ✅ | ❌ | ✅ | | 从 Http 到 Internal 保存图像 | ❌ | ✅ | ❌ | ❌ | | 获取内部 图像路径 | ❌ | ✅ | ❌ | ❌ | ## 文档 [API 文档](https://github.com/capacitor-community/photoviewer/blob/master/docs/API.md) ## 显示插件用途的应用程序 ### 离子/角 - [角-相机查看器-应用程序](https://github.com/jepiqueau/angular-photoviewer-app) ### 音响/声调 - [vue- photoviewer - app 图像查看器](https://github.com/jepiqueau/vue-photoviewer-app) ### 反应 - [vite- react-相片查看器-应用](https://github.com/jepiqueau/vite-react-photoviewer-app) ## 使用量 - [在您的离子/ Vue App中](https://github.com/capacitor-community/photoviewer/blob/master/docs/Ionic-Vue-Usage.md) - [在您的离子/角相上](https://github.com/capacitor-community/photoviewer/blob/master/docs/Ionic-Angular-Usage.md) ### iOS和Android 软件 - 单位 `Gallery` 模式(图像分数不只一个) : - 制作一个 `tap` 将选择图像并进行全屏 - 在富尔屏幕中 - `tap` 将隐藏共享和退出按钮并打开窗口用于其他手势. - `double tap` 缩放 - `pinch` 用你的两只手指 - `tap` 将显示共享和退出按钮,并将窗口留给其他手势. - `double tap` 将隐藏按钮并缩放为直截了当(只有iOS) - 单位 `One Image` 模式(只包含一个图像的图像矩阵) : - `pinch-zoom` 财务报告和审定财务报表 `pan` 用你的两只手指 - `double-tap` 直接缩放到最大缩放 - 您可以在选项中通过自定义信头对象, 让插件将这些信头传递给 http 图像请求 。 例如: ```ts PhotoViewer.show({ images: [ { url: 'https://picsum.photos/id/237/200/300', title: 'Title' }, { url: 'https://picsum.photos/id/238/200/300', title: 'Title' }, ], options: { customHeaders: { accept: 'image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/*;q=0.8, */*;q=0.5', cookie: 'session=foo;', }, }, mode: 'slider' }) ``` ## 依赖关系 Android 代码正在使用 `MikeOrtiz/TouchImageView` 使图片缩放[https://github.com/MikeOrtiz/TouchImageView 页面存档备份,存于互联网档案馆](https://github.com/MikeOrtiz/TouchImageView)(中文(简体) ) IOS 代码正在使用 `SDWebImage` 用于 httpasync 图像下载器 ([https://github.com/SDWebImage/SDWebImage 页面存档备份,存于互联网档案馆](https://github.com/SDWebImage/SDWebImage)和 `ISVImageScrollView` 图片中的相片和相片[https://github.com/yuriik/ISVImage 互联网档案馆的存檔,存档日期2013-12-22](https://github.com/yuriiik/ISVImageScrollView)(中文(简体) ) ## 贡献者 感谢这些伟大的人[emoji 密钥](https://allcontributors.org/docs/en/emoji-key): [![](https://github.com/jepiqueau.png?size=100)](https://github.com/jepiqueau "jepiqueau") [![](https://github.com/ludufre.png?size=100)](https://github.com/ludufre "ludufre") [![](https://github.com/rdlabo.png?size=100)](https://github.com/rdlabo "rdlabo") [![](https://github.com/bozhidarc.png?size=100)](https://github.com/bozhidarc "bozhidarc") [![](https://github.com/adnbrownie.png?size=100)](https://github.com/adnbrownie "adnbrownie") [![](https://github.com/chiraganand.png?size=100)](https://github.com/chiraganand "chiraganand") [![](https://github.com/camilocalvo.png?size=100)](https://github.com/https://github.com/camilocalvo "camilocalvo") [![](https://github.com/shiv19.png?size=100)](https://github.com/shiv19 "shiv19") 本项目遵循 [全部贡献者](https://github.com/all-contributors/all-contributors) 规格。 任何捐款都欢迎! ## 常见问题 ### @capacitor-community/photoviewer 是什么？ 具有全屏和共享能力的 PhotoViewer 表格图像 ### 如何安装 @capacitor-community/photoviewer？ 在项目目录运行 npm install @capacitor-community/photoviewer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@capacitor/core（\>=8\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @capacitor-community/photoviewer 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @capacitor-community/photoviewer 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @capacitor-community/photoviewer 可以商用吗？ @capacitor-community/photoviewer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @capacitor-community/photoviewer 的下载量有多少？ 根据 npm 官方下载统计，@capacitor-community/photoviewer 在 2026/10/09 – 2026/11/07 这 30 天内被下载 7,884 次，日均约 263 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @capacitor-community/photoviewer 还在维护吗？ 最新版本 8\.0\.1 发布于 2026/06/04（5 个月前）；至今共发布 53 个版本，其中过去 12 个月发布了 2 个；首次发布于 2021/03/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。