> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 图像输入

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/objects/objects.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=f753eac3bada05044c64e7af9ddea9ab" alt="标题" width="1440" height="680" data-path="images/user-guide/objects/objects.png" />
</Frame>

允许用户上传和删除图像。

<Tabs>
  <Tab title="**用法**">
    ```jsx theme={null}
    import { ImageInput } from "@/ui/input/components/ImageInput";

    export const MyComponent = () => {
      return <ImageInput/>;
    };
    ```
  </Tab>

  <Tab title="属性">
    | 属性           | 类型  | 描述                                |
    | ------------ | --- | --------------------------------- |
    | 图片           | 字符串 | 图片来源 URL                          |
    | onUpload     | 函数  | 当用户上传新的图片时调用的函数。 接收 `File` 对象作为参数 |
    | onRemove     | 函数  | 当用户点击移除按钮时调用的函数                   |
    | onAbort      | 函数  | 当用户在上传图片过程中点击中止按钮时调用的函数           |
    | isUploading  | 布尔值 | 指示图像当前是否正在上传中                     |
    | errorMessage | 字符串 | 在图片输入下方显示的可选错误消息                  |
    | disabled     | 布尔值 | 如果 `true` ，整个输入被禁用，按钮不可点击         |
  </Tab>
</Tabs>