时间：2025-11-22 09:39
人气：
作者：admin
在当今的 Web 开发中，图片预览功能几乎是每个网站的标配。然而，大多数现有的图片预览库要么过于臃肿，要么依赖特定的前端框架，要么配置复杂。有没有一种方案，能够只需引入一个 JavaScript 文件，就能为网站添加完整的图片预览功能？
今天我要向大家介绍 ImageViewer.js - 一个真正意义上的零依赖、现代化图片预览 Web Component。
想象一下，你只需要在 HTML 中添加这样一行代码：
<script src="https://cdn.jsdelivr.net/gh/mrhuo/image-viewer@1.0.0/dist/image-viewer.min.js"></script>
然后，页面上的所有图片就自动获得了全屏预览功能！点击任意图片，就能享受沉浸式的浏览体验。
桌面端体验 - 全屏预览，提供直观的缩放、旋转和导航控制
移动端优化 - 触摸友好的界面，流畅的手势操作和响应式设计
这是 ImageViewer.js 最大的亮点：
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/gh/mrhuo/image-viewer@1.0.0/dist/image-viewer.min.js"></script>
<!-- 你的图片 -->
<img src="image1.jpg" alt="美丽的风景">
<img src="image2.jpg" alt="可爱的动物">
就这么简单！所有图片都自动支持点击预览。
如果你需要更精细的控制：
<script src="https://cdn.jsdelivr.net/gh/mrhuo/image-viewer@1.0.0/dist/image-viewer.min.js"
id="gd-image-viewer"
data-target-selector=".gallery-img"
data-max-scale="8"
data-min-scale="0.3"
data-allow-rotate="false"
data-allow-download="true">
</script>
<!-- 只有特定图片可预览 -->
<img src="image1.jpg" class="gallery-img" alt="图片1">
<img src="image2.jpg" class="gallery-img" alt="图片2">
| 选项 | 默认值 | 描述 |
|---|---|---|
data-target-selector |
'img' |
可点击图片的 CSS 选择器 |
data-max-scale |
5 |
最大缩放倍数 |
data-min-scale |
0.5 |
最小缩放倍数 |
data-allow-rotate |
true |
是否允许旋转图片 |
data-allow-download |
true |
是否允许下载图片 |
ImageViewer.js 采用 Web Components 技术，这意味着：
# 从 GitHub 下载
git clone https://github.com/mrhuo/image-viewer.git
<script src="https://cdn.jsdelivr.net/gh/mrhuo/image-viewer@1.0.0/dist/image-viewer.min.js"></script>
npm install
npm run build
ImageViewer.js 解决了图片预览功能集成复杂、依赖过多的问题。它的核心优势可以总结为：
无论你是个人博客、企业官网，还是复杂的 Web 应用，ImageViewer.js 都能为你提供专业级的图片预览解决方案。
让图片预览变得简单而强大！ ????
如果你觉得这个项目有用，欢迎在 GitHub 上给个 ⭐️，也欢迎提交 Issue 和 Pull Request！
关注微信