VitePress 图片查看插件

插件介绍

vitepress-plugin-image-viewer 是一个 VitePress 插件，为文档中的所有图片添加无级缩放功能，无需修改 Markdown 内容。

插件特点

• 简单集成：几行代码即可在 VitePress 项目中启用
• 零配置：自动为所有图片添加缩放功能
• 用户友好：提供直观的缩放体验

安装

使用包管理器安装插件：

# npm 
npm i vitepress-plugin-image-viewer

# yarn
yarn add vitepress-plugin-image-viewer

# pnpm
pnpm add vitepress-plugin-image-viewer
# 注意：使用 pnpm 时，需要额外安装 viewerjs
pnpm add viewerjs

使用方法

在 .vitepress/theme/index 文件中添加以下代码：

import DefaultTheme from 'vitepress/theme';
import 'viewerjs/dist/viewer.min.css';
import imageViewer from 'vitepress-plugin-image-viewer';
import vImageViewer from 'vitepress-plugin-image-viewer/lib/vImageViewer.vue';
import { useRoute } from 'vitepress';

export default {
    ...DefaultTheme,
    enhanceApp(ctx) {
        DefaultTheme.enhanceApp(ctx);
        // 注册全局组件（可选）
        ctx.app.component('vImageViewer', vImageViewer);
    },
    setup() {
        const route = useRoute();
        // 启用插件
        imageViewer(route);
    }
};

效果演示

上图演示了 vitepress-plugin-image-viewer 的效果。 您可以看到用户如何点击图片打开查看器，然后使用鼠标或触摸手势进行缩放和平移操作。 查看器界面简洁，不影响整体阅读体验，同时提供了强大的图片查看功能。