以下是一个使用Ant Design的React表格组件的示例，并在其中展示图片：
首先，确保你已经安装了Ant Design和React的相关依赖。然后，在你的项目中创建一个新文件，例如TableWithImage.js，并按照以下方式编写代码：
import React from 'react';
import { Table, Avatar } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
avatar: '/path/to/image1.jpg', // 替换为实际的图片路径
},
{
key: '2',
name: 'Jim Green',
avatar: '/path/to/image2.jpg', // 替换为实际的图片路径
},
{
key: '3',
name: 'Joe Black',
avatar: '/path/to/image3.jpg', // 替换为实际的图片路径
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Avatar',
dataIndex: 'avatar',
key: 'avatar',
render: (avatar) => (
<Avatar src={avatar} />
),
},
];
const TableWithImage = () => {
return <Table dataSource={dataSource} columns={columns} />;
};
export default TableWithImage;在上面的代码中，我们首先导入了所需的React、Ant Design的Table和Avatar组件。然后，我们定义了一个名为dataSource的数据源，其中包含了一些人员信息，包括名字和头像的路径。接下来，我们定义了一个名为columns的列配置，其中包含了两列：名称和头像。在头像列的render属性中，我们使用Avatar组件来展示图片。最后，我们创建了一个名为TableWithImage的函数组件，它返回了一个Table组件，并将之前定义的数据源和列配置传递给它。