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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容