hana-img-viewer

hana-img-viewer

A lightweight Vue 3 image previewer. Only src and an optional alt are required to get started; the styles are shipped separately in style.css.

Features

• Thumbnail-origin FLIP open and close
• src-first preview path with optional silent previewSrc enhancement
• Wheel, double-click, drag, and pinch interactions
• SSR-safe thumbnail-only server render

Usage

Install:

pnpm add hana-img-viewer

Import in a .vue component:

<script setup lang="ts">
import { HanaImgViewer } from 'hana-img-viewer'
</script>

<template>
  <HanaImgViewer src="/images/post-thumb.jpg" alt="Article cover" />
</template>

Import style.css in main.ts:

import 'hana-img-viewer/style.css'

API

Props

The component emits only update:open. Use v-model:open to keep the state in sync:

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <HanaImgViewer v-model:open="open" src="/images/post-thumb.jpg" />
</template>

The thumbnail root is a div by default. Choose a non-void element compatible with its parent when the viewer is rendered in a constrained HTML context, such as Markdown prose:

<p>
  <HanaImgViewer as="span" src="/images/post-thumb.jpg" />
</p>

Plain class, style, and other attrs fall through to the visible thumbnail root.

A custom mount target only accepts an HTMLElement:

<script setup lang="ts">
import { ref } from 'vue'

const container = ref<HTMLElement | null>(null)
</script>

<template>
  <div ref="container" />
  <HanaImgViewer :container="container" src="/images/post-thumb.jpg" />
</template>

The component supports both local registration and app.use(HanaImgViewer); the default and named exports are the same component reference.