图片查看器

图片查看器，支持缩放、拖拽、全屏遮罩、标题说明及下载按钮。可自动增强页面中的所有图片。基于 Vue3 构建。

https://www.npmjs.com/package/@miletorix/vitepress-image-viewer
https://github.com/miletorix/vitepress-image-viewer

安装

npm

npm install -D @miletorix/vitepress-image-viewer

yarn

yarn add -D @miletorix/vitepress-image-viewer

pnpm

pnpm add -D @miletorix/vitepress-image-viewer

bun

bun add -D @miletorix/vitepress-image-viewer

配置

Theme Config

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';

import ImageViewerP from '@miletorix/vitepress-image-viewer'; 
import '@miletorix/vitepress-image-viewer/style.css'; 

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {

    });
  },
  enhanceApp({ app, router, siteData }) {
    ImageViewerP(app); 
  },
} satisfies Theme;

使用

![Vitepress](/vitepress-og.jpg)

![Vitepress](/vitepress-og.jpg)

Vitepress

Vitepress

Browser icons: MS Edge, Google Chrome, Mozilla FireFox, Apple Safari