图片 Image

基础用法

contain

cover

fill

none

scale-down

<template>
  <div class="demo-area">
    <div class="fit-item" v-for="fit in fitTypes">
      <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"
      >
      </bp-image>
    </div>
  </div>
</template>

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

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

    p {
      color: #8c8c8c;
      font-size: 13px;
    }

    &:not(:first-child) {
      border-left: 1px solid #f0f0f0;
    }
  }
}
</style>

Image 属性

src	图片地址	String	-	-
alt	替代文本	String	-	-
title	标题	String	-	-
width	宽度	String	-	-
height	高度	String	-	-
fit	填充方式	String	fill	-
fallback	加载失败兜底图片	String	-	-
lazy	是否懒加载	Boolean	-	-
placeholder	懒加载占位图	String	-	-
load-effect	加载动画效果	String	fade	-

Image 事件

load	加载完成	ev: Event	-
error	加载失败	ev: Event	-

Image 插槽

loading	加载中内容	-	-
error	加载失败内容	-	-