vitepress-image-viewer

Appearance

vitepress-image-viewer ​

VitePress image viewer with zoom, drag, fullscreen overlay, captions and download button. Automatically enhances all images on the page. Built with Vue 3.

npm
license

Installation ​

npm
sh
npm i @davidingplus/vitepress-image-viewer

Usage ​

Configuration ​

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

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

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ImageViewerP(ctx.app) 
  }
}

Examples ​

Markdown Image ​

Input:

example.md
md
![Rolling hills, Moravia, Czech Republic.](/demo-2.jpg)

Output:

Rolling hills, Moravia, Czech Republic.

HTML Image ​

Input:

example.md
html
<img src="/demo-3.jpg" alt="Nature, Landscape, Portrait display." />

Output:

Nature, Landscape, Portrait display.

Image using the Image Group plugin ​


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

Input:

vue
<ImageGroup
  :sources="[
    'demo-4.jpg'
  ]"
  type="manual"
  width="400px"
  caption="Japanese Waterfall."
/>

Output:

Japanese Waterfall.

Japanese Waterfall.