antd的Table组件如何插入图片

在项目中有一个需求是在Table组件中插入图片，但是Table有自己封装的语法，查了查资料才整出来，完整代码如下：

import React, { Component } from 'react';
import {Input,Select,DatePicker,Button,Table,Pagination} from 'antd';
import axios from "axios";
class Monitor extends Component{
    render(){
        const columns=[
           //....省略
           {
            title: '人脸图片1',
            dataIndex: 'filePathOne',
            key: 'filePathOne',
            render: (record) => 
            //   console.log("record的内容",record)
            <img src={record} width="100px" alt=""/> 
            },{
            title: '人脸图片2',
            dataIndex: 'filePathtwo',
            key: 'filePathtwo',
            render: (record) => <img src={record} alt="" width="100px"/>
            }]
        return(
            <div>
                  <Table 
                    columns={columns} 
                    dataSource={xxxxxx} //这块换成你项目中储存的变量
                    pagination={false}/>
            </div>
        )
    }

}
export default Monitor;

record是Table方法中内置的参数，record显示的是你自己定义的dataIndex中参数的内容；

我在项目中打印出来了record,打印结果如下：

record内容.jpg

打印的内容就是后台返回给我的url，我只需要将它放在img标签中即可

实现的效果如下：

图片显像.jpg