在项目中有一个需求是在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,打印结果如下:
打印的内容就是后台返回给我的url,我只需要将它放在img标签中即可
实现的效果如下: