react 中antd的Table组件插入图片

Table有自己封装的语法，如下：

import React from 'react';
import {Table} from 'antd';
import Image from './Images/Haha.jpg'
class Monitor extends React.Component{
    render(){
        const columns=[
            {
                title:'name',
                dataIndex:'name',
                width:150,
            },
            {
                title:'age',
                dataIndex:'age',
                width:150,
            },
            {
                title:'address',
                dataIndex:'address',
                width:150,
            },
           {
            title: '图片1',
            dataIndex: 'ImageOne',
            key: 'ImageOne',
            render: (record) => 
            //   console.log("record的内容",record)
            <img src={Image} width="100px" alt=""/> 
            },
            {
            title: '图片2',
            dataIndex: 'Imagetwo',
            key: 'Imagetwo',
            render: (record) => <img src={Image} alt="" width="100px"/>
            }]
            const data = [
                {
                    key:'1',
                    name:'a',
                    age:'20',
                    address:'dfjak',
                },
                {
                    key:'2',
                    name:'b',
                    age:'21',
                    address:'fhfkgsfdjgl'
                },
            ]
        return(
            <div>
                  <Table 
                    columns={columns} 
                    dataSource={data} //数据
                    pagination={false}
                    />
            </div>
        )
    }

}
export default Monitor;

record是Table方法中内置的参数，record显示的是你自己定义的dataIndex中参数的内容。（在此处我用的是自己本地的测试图片。）

原文地址：https://www.jianshu.com/p/04e1b4c79b4a