GitHubX

Image

PreviousNext

A composable image component with loading state management and fallback support. Use it standalone for simple image display, or combine it with Image Viewer for zoom capabilities.

      
      <script setup lang="ts">
import { Image, ImageError, ImageLoading, ImageSource } from "@/components/image";
</script>
    
<template>
  <Image>
    <ImageSource class="w-72 aspect-video" src="https://picsum.photos/id/229/600/400" alt="..." />

    <ImageLoading as-child>
      <div class="w-72 aspect-video p-2 text-center text-muted-foreground bg-muted">
        Loading...
      </div>
    </ImageLoading>

    <ImageError>
      <div class="p-2 text-center text-destructive-foreground bg-destructive">
        An error occurred while loading the image.
      </div>
    </ImageError>
  </Image>
</template>

Features

  • Loading states — Automatic detection of loading, error, and success states
  • Fallback support — Display placeholder content during loading or on error
  • Composable — Flexible slot-based architecture with ImageSource, ImageLoading, ImageError, and ImageFallback

Installation

Install from the Vuzeno registry with the shadcn-vue CLI:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/image.json
GalleryImage Viewer