图片 Image

用于展示图片资源的组件，支持懒加载、加载动画、加载失败兜底等能力。

基础用法

通过 src 属性设置图片地址，支持 width 和 height 控制尺寸。

<template>
  <bp-image
    width="300px"
    height="200px"
    src="https://cos.birdpaper.design/birdpaper-ui/v2/image-demo/img_1.jpg?imageMogr2/thumbnail/!80p"
    alt="示例图片"
  />
</template>

填充方式

通过 fit 属性设置图片的填充方式，与 CSS 的 object-fit 属性一致。支持 5 种方式：fill - 拉伸填充（默认），contain - 等比缩放包含，cover - 等比缩放覆盖，none - 原始尺寸，scale-down - 取较小值。

fill

contain

cover

none

scale-down

<template>
  <div class="demo-area">
    <div class="fit-item" v-for="fit in fitTypes" :key="fit">
      <p>{{ fit }}</p>
      <bp-image
        width="80px"
        height="80px"
        :fit
        src="https://cos.birdpaper.design/birdpaper-ui/v2/image-demo/img_1.jpg?imageMogr2/thumbnail/!80p"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const fitTypes = ["fill", "contain", "cover", "none", "scale-down"];
</script>

<style lang="scss" scoped>
.demo-area {
  display: flex;
  gap: 16px;
  .fit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    p {
      color: #8c8c8c;
      font-size: 13px;
    }
  }
}
</style>

加载失败

通过 fallback 属性设置加载失败时的兜底图片。也可以使用 error 插槽自定义错误展示内容。

<template>
  <bp-space :size="16">
    <bp-image
      width="200px"
      height="150px"
      src="https://invalid-url/broken.jpg"
      fallback="https://cos.birdpaper.design/birdpaper-ui/v2/image-demo/img_1.jpg?imageMogr2/thumbnail/!80p"
    />
    <bp-image width="200px" height="150px" src="https://invalid-url/broken.jpg">
      <template #error>
        <div class="error-slot">
          <IconCloseCircleLine size="28" />
          <span>加载失败</span>
        </div>
      </template>
    </bp-image>
  </bp-space>
</template>

<script setup lang="ts">
import { IconCloseCircleLine } from "birdpaper-icon";
</script>

<style lang="scss" scoped>
.error-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #c9cdd4;
  gap: 4px;

  span {
    font-size: 12px;
  }
}
</style>

加载动画

通过 load-effect 属性设置图片加载完成时的动画效果。支持 3 种效果：fade - 渐显（默认），blur - 模糊过渡，none - 无动画。

fade

blur

none

<template>
  <div class="demo-area">
    <div class="effect-item">
      <p>fade</p>
      <bp-image
        width="200px"
        height="140px"
        src="https://cos.birdpaper.design/birdpaper-ui/v2/image-demo/img_1.jpg?imageMogr2/thumbnail/!80p"
        load-effect="fade"
      />
    </div>
    <div class="effect-item">
      <p>blur</p>
      <bp-image
        width="200px"
        height="140px"
        src="https://cos.birdpaper.design/birdpaper-ui/v2/image-demo/img_1.jpg?imageMogr2/thumbnail/!80p"
        load-effect="blur"
      />
    </div>
    <div class="effect-item">
      <p>none</p>
      <bp-image
        width="200px"
        height="140px"
        src="https://cos.birdpaper.design/birdpaper-ui/v2/image-demo/img_1.jpg?imageMogr2/thumbnail/!80p"
        load-effect="none"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.demo-area {
  display: flex;
  gap: 16px;

  .effect-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    p {
      color: #8c8c8c;
      font-size: 13px;
    }
  }
}
</style>

Image 属性

src	图片资源地址	String	-	-
alt	图片替代文本	String	-	-
title	图片标题	String	-	-
width	图片宽度，支持 CSS 单位	String	-	-
height	图片高度，支持 CSS 单位	String	-	-
fit	图片填充方式，同 CSS object-fit	String	fill	-
fallback	加载失败时的兜底图片地址	String	-	-
lazy	是否开启懒加载	Boolean	-	-
placeholder	懒加载时的占位图片地址	String	-	-
load-effect	图片加载完成的动画效果	String	fade	-

Image 事件

load	图片加载完成时触发	ev: Event	-
error	图片加载失败时触发	ev: Event	-

Image 插槽

loading	图片加载中的占位内容	-	-
error	图片加载失败的展示内容	-	-