react antd表格中渲染一张或多张图片

使用antd table中显示一张图片，代码如下：

const columns = [  {
     
    title: "姓名",
    dataIndex: "name",
    width: 100 ,   // table列定宽  可不设
     fixed: "left"   // 固定列的位置
  },
  {
     
    title: "联系电话",
    width: 150,
    dataIndex: "phone"
  },
  {
     
  title:"显示一张图片",
  width:150，
  dataIndex:"img"，
  render：(text)=> <img src={
     text}/>
  },
  {
     
  title:"显示多张图片",
  width:400，
  dataIndex:"imgs"，
  render: text => {
     
 // text是后端传的多个url，需要逗号分隔再显示图片
      if (text) {
     
        return (
          <div style={
     {
      display: "flex" }}>
            {
     text.split(",").map((items, index) => {
     
              return (
                <div
                  key={
     index}
                  className="common-img-list"
                  style={
     {
     
                    width: "100px",
                    height: "100px",
                    marginLeft: "4px",
                    overflow: "hidden"
                  }}
                >
                  <img
                    style={
     {
      width: "100%" }}
                    src={
     items}
                    onClick={
     () => {
     
                      InitImageViwer();   // 点击放大图片
                    }}
                  />
                </div>
              );
            })}
          </div>
        );
      }
  },
]

// 点击放大图片预览
function InitImageViwer(
  box = 'common-img-list',   // 注意class不要忘记了
  option = {
     },
  callBack
) {
     
  setTimeout(() => {
     
    const viewList = []
    const el = document.querySelectorAll(`.${
       box}`)
    if (el.length) {
     
      el.forEach((z, x) => {
     
        viewList[x] = new ImageViewer(z, option)
      })
      callBack && callBack(viewList)
    }
  }, 1000)
}

// table 使用  scroll  表格滚动
<Table columns={
     columns}   scroll={
     {
      x: 1500, y: 500 }} />   

实现效果图：

点击图片放大预览效果：