BreezeUI
  • English

    • Image

    An enterprise-level image component with support for lazy loading, preview, and error fallback.

    Component Features

    • 🖼️ Fit Modes: Supports fill, contain, cover, none, scale-down object-fit modes.
    • 🔍 Preview: Supports full-screen preview with zoom and rotation.
    • ⚡ Lazy Loading: Supports lazy loading to defer loading off-screen images.
    • 💧 Watermark: Supports adding watermarks to images.
    • 🖼️ Error Fallback: Displays fallback content when image fails to load.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    Display a basic image.

    <script setup lang="ts">
import { BrImage } from '@breezeui/vue'
</script>

<template>
  <BrImage
    src="https://images.unsplash.com/photo-1682687220063-4742bd7fd538?q=80&w=2070&auto=format&fit=crop"
    class="w-64 h-48"
    rounded="md"
    shadow="md"
  />
</template>

    Object Fit

    Use the fit prop to control how the image should be resized to fit its container, just like the native object-fit CSS property.

    <script setup lang="ts">
import { BrImage, BrFlex, BrStack } from '@breezeui/vue'

const fits = ['cover', 'contain', 'fill', 'none', 'scale-down'] as const
</script>

<template>
  <BrFlex gap="4" wrap="wrap">
    <BrStack v-for="fit in fits" :key="fit" class="items-center" gap="2">
      <BrImage
        src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?q=80&w=2070&auto=format&fit=crop"
        class="w-32 h-32 bg-muted/20"
        :fit="fit"
        rounded="md"
        bordered
      />
      <span class="text-sm">{{ fit }}</span>
    </BrStack>
  </BrFlex>
</template>

    Image Preview

    Use the preview prop to enable a full-screen image preview. You can also provide an array of images to preview-src-list to allow cycling through multiple images.

    <script setup lang="ts">
import { BrImage, BrFlex } from '@breezeui/vue'

const srcList = [
  'https://images.unsplash.com/photo-1682687982501-1e58f813fb26?q=80&w=2070&auto=format&fit=crop',
  'https://images.unsplash.com/photo-1682687220063-4742bd7fd538?q=80&w=2070&auto=format&fit=crop',
  'https://images.unsplash.com/photo-1682687220199-d0124f48f95b?q=80&w=2070&auto=format&fit=crop'
]
</script>

<template>
  <BrFlex gap="4">
    <BrImage
      v-for="(src, index) in srcList"
      :key="index"
      :src="src"
      :preview-src-list="srcList"
      preview
      class="w-48 h-32"
      rounded="md"
      shadow="sm"
    />
  </BrFlex>
</template>

    Lazy Loading

    Use the lazy prop to defer loading the image until it enters the viewport. A skeleton screen is automatically displayed while the image is loading.

    <script setup lang="ts">
import { BrImage } from '@breezeui/vue'
</script>

<template>
  <div class="h-64 overflow-y-auto border border-border p-4 rounded-md">
    <div class="h-[800px] flex items-center justify-center bg-muted/10 rounded-md mb-4">
      <span class="text-muted-foreground">Scroll down to see lazy loaded image / Scroll down to see lazy loaded images</span>
    </div>
    <BrImage
      src="https://images.unsplash.com/photo-1682695796497-31a442284692?q=80&w=2070&auto=format&fit=crop"
      class="w-full h-64"
      lazy
      rounded="lg"
      shadow="md"
    />
  </div>
</template>

    Watermark

    Use the watermark prop to add a watermark to the image. You can pass a string or a configuration object.

    <script setup lang="ts">
import { BrImage } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4">
    <!-- Text Watermark -->
    <BrImage
      src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?auto=format&fit=crop&q=80&w=800"
      class="w-64 h-48"
      rounded="md"
      watermark="Breeze UI"
    />

    <!-- Custom Watermark Configuration -->
    <BrImage
      src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?auto=format&fit=crop&q=80&w=800"
      class="w-64 h-48"
      rounded="md"
      :watermark="{
        text: 'Confidential',
        color: 'rgba(255, 0, 0, 0.3)',
        fontSize: 20,
        angle: -30,
        gap: [120, 120]
      }"
    />
  </div>
</template>

    Error Fallback

    When an image fails to load, a default error fallback will be displayed automatically.

    <script setup lang="ts">
import { BrImage } from '@breezeui/vue'
</script>

<template>
  <BrImage
    src="/non-existent-image-for-error-demo.jpg"
    class="w-64 h-48"
    rounded="md"
    bordered
  />
</template>

    API

    BrImage

    Props

    NameTypeDefaultDescription
    srcstring-The source URL of the image
    altstring-The alternative text of the image
    fitstring'cover'How the image should fit its container: fill, contain, cover, none, scale-down
    lazybooleanfalseWhether to use lazy loading
    previewbooleanfalseWhether to enable image preview
    previewSrcListstring[][]List of image URLs for the preview gallery
    initialIndexnumber0The initial index of the preview gallery
    zIndexnumber100The z-index of the preview overlay
    watermarkstring | object-Watermark text or configuration object
    roundedstring'none'Border radius: none, sm, md, lg, xl, 2xl, full
    shadowstring'none'Box shadow: none, sm, md, lg, xl
    borderedbooleanfalseWhether to show a border

    Events

    NameTypeDescription
    load(e: Event) => voidEmitted when the image loads successfully
    error(e: Event) => voidEmitted when the image fails to load
    show() => voidEmitted when the preview is opened
    close() => voidEmitted when the preview is closed
    switch(index: number) => voidEmitted when switching images in the preview gallery