antdesignpro ProForm显示图片

可以通过使用 `ProForm.Item` 的 `render` 属性来自定义表单项的渲染方式，从而实现在表单中显示图片。

以下是一个使用 `ProForm.Item` 自定义表单项渲染方式来显示图片的示例代码：

import { ProForm, ProFormText } from '@ant-design/pro-form';
import { Upload } from 'antd';

const MyUpload = () => {
  return (
    <Upload>
      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
  );
};

const MyImage = ({ value }) => {
  return (
    <img
      src={value}
      alt="preview"
      style={{ maxWidth: '100%', maxHeight: '100%' }}
    />
  );
};

const MyFormItem = ({ name, label, rules, render }) => {
  return (
    <ProForm.Item
      name={name}
      label={label}
      rules={rules}
      render={render}
    />
  );
};

const MyForm = () => {
  return (
    <ProForm>
      <MyFormItem
        name="name"
        label="Name"
        rules={[{ required: true }]}
        render={() => <ProFormText />}
      />

      <MyFormItem
        name="avatar"
        label="Avatar"
        render={() => <MyImage />}
        rules={[{ required: true }]}
      />

      <MyFormItem
        name="upload"
        label="Upload"
        render={() => <MyUpload />}
        rules={[{ required: true }]}
      />
    </ProForm>
  );
};

在上面的代码中，我们定义了一个 `MyUpload` 组件和一个 `MyImage` 组件，分别用来处理上传文件和显示图片的逻辑。然后我们又定义了一个 `MyFormItem` 组件，用来自定义表单项的渲染方式。在 `MyFormItem` 组件中，我们通过 `render` 属性来指定表单项的渲染方式，实现了在表单中显示图片的效果。

最后，在 `MyForm` 组件中，我们使用 `MyFormItem` 组件来定义表单项，其中 `name` 属性用来指定表单项的字段名，`label` 属性用来指定表单项的标签名，`rules` 属性用来指定表单项的验证规则，`render` 属性用来指定表单项的渲染方式。通过这样的方式，我们可以实现一个自定义表单项渲染方式的表单，并在其中显示图片。