BreezeUI
  • 简体中文

    • Image 图片

    企业级图片展示组件，支持懒加载、预览、错误兜底等功能。

    组件特性

    • 🖼️ 多种适应模式：fit 属性支持 cover、contain、fill、none、scale-down 等适应模式。
    • 🔍 图片预览：支持全屏大图预览和多图轮播。
    • ⚡ 懒加载：通过 lazy 属性实现图片懒加载，进入可视区域才开始加载。
    • 💧 水印功能：watermark 属性支持添加文字或配置水印。
    • ❌ 错误兜底：图片加载失败时自动显示错误占位。
    • 📦 样式定制：支持圆角、阴影、边框等样式属性。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置。

    基础用法

    展示一张基础的图片。

    <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>

    适应模式

    使用 fit 属性来控制图片如何适应其容器，类似于原生的 object-fit CSS 属性。

    <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>

    图片预览

    使用 preview 属性开启全屏大图预览。你也可以通过 preview-src-list 提供一个图片数组，以实现多图轮播。

    <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 属性开启懒加载，图片将在进入可视区域时才开始加载。在加载过程中会自动显示骨架屏。

    <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 属性可以为图片添加水印。你可以传入字符串或配置对象。

    <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>

    错误兜底

    当图片加载失败时，会自动显示默认的错误提示占位。

    <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 属性

    名称类型默认值说明
    srcstring-图片的资源地址
    altstring-图片的替代文本
    fitstring'cover'图片适应容器的模式：fill, contain, cover, none, scale-down
    lazybooleanfalse是否开启懒加载
    previewbooleanfalse是否开启图片预览
    previewSrcListstring[][]预览图库的图片地址列表
    initialIndexnumber0预览图库的初始索引
    zIndexnumber100预览遮罩层的 z-index
    watermarkstring | object-水印文本或配置对象
    roundedstring'none'圆角大小：none, sm, md, lg, xl, 2xl, full
    shadowstring'none'阴影大小：none, sm, md, lg, xl
    borderedbooleanfalse是否显示边框

    Events 事件

    名称类型说明
    load(e: Event) => void图片加载成功时触发
    error(e: Event) => void图片加载失败时触发
    show() => void预览打开时触发
    close() => void预览关闭时触发
    switch(index: number) => void在预览图库中切换图片时触发