图片 Image ​

展示图片

注：示例中引用图片均为本站作者拍摄，如需引用，麻烦先征得作者同意。

基础用法 ​

基础展示图片

<template>
  <bp-image :width="320" src="https://cos.birdpaper.design/birdpaper-ui/v2/image-demo/img_10.jpg?imageMogr2/thumbnail/!80p">
  </bp-image>
</template>

图片适应 ​

通过 fit 属性设置不同的适应类型

<template>
  <div class="demo-area">
    <div class="fit-item" v-for="v in fitTypes">
      <p>{{ v }}</p>
      <bp-image
        :width="80"
        :height="80"
        :fit="v"
        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="less" 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
-
fit
图片适应类型
Enum
normal
alt
文字描述
String
-
title
标题
String
-
width
图片宽度
StringNumber
-
height
图片高度
StringNumber
-

Image 事件 ​

load
图片加载完成触发
none
error
图片加载失败触发
none

Image 插槽 ​

loading
加载状态
-
error
失败状态
-