---
title: 设计文档
order: 2
category: pro
---

# PisellImage 设计文档

## 1. 概述

PisellImage 是一个图片组件，用于显示图片。

## 2. 核心功能

- 支持数据源展示图片。
- 支持填充模式切换。
- 支持 width height 设置。
- 继承 PisellBasicCardProps 的属性和方法。
- 如果未设置 src， 则使用 alt 作为文字展示。

## 3. 组件 Props 定义

```
// 继承 PisellBasicCardProps
interface PisellImageCardProps extends PisellBasicCardProps {
  // 图片数据源
  dataSource: {
    src: string; // 图片地址
    alt: string; // 替换文本
    errorSrc: string; // 失败地址
    fallbackSrc: string; // 占位图地址
  },
  width: CSSProperties['width']; // 宽度
  height: CSSProperties['height']; // 高度
  fillMode: 'cover' | 'contain' | 'fill' | 'none'; // 填充模式
}
```
