react使用antd中的table表格渲染一张或者多张图片并且实现点击放大预览图片

1、首先，第一步

cnpm install viewerjs --save
# 或者
npm install viewerjs --save
# 或者
yarn add viewerjs --save

2、第二步进行一个引用

// 渲染图片和预览
import 'viewerjs/dist/viewer.css';
import ImageViewer from "viewerjs"

3、第三步在需要显示图片的columns中进行引用

columns中使用

const columns = [
    {
      title: 'ID',
      key: '_id',
      render: (text: any, record: any, index: number) => <>{index + 1}</>,
      width: "60px"
    },
    {
      title: '评论的用户',
      dataIndex: 'userid',
      key: 'userid',
      render: (text) => <a>{text.userName}</a>,
      width: "120px"
    },
    {
      title: '沸点标题',
      dataIndex: 'title',
      key: 'title',
      ellipsis: true,
      width: "150px"
    },
    {
	  title:"沸点图片(显示一张图片)",
	  width:150，
	  dataIndex:"img"，
	  render：(text)=> <img src={text}/>
  	},
    {
      title: "沸点图片(显示多张图片)",
      width: "260px",
      dataIndex: "img",
      render: (text: any[]) => {
        // console.log("111111111111", text);
        // text是后端传的多个url，需要逗号分隔再显示图片
        if (text.length > 0) {
          return (
            <div className='img-list' style={{ display: "flex" }}>
              {text.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={"http://localhost:7777/" + items}
                      onClick={() => {
                        InitImageViwer();   // 点击放大图片
                      }}
                    />
                  </div>
                );
              })}
            </div>
          );
        }
      },
    },
    {
      title: '操作',
      key: 'action',
      width: "150px",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a>修改</a>
          <a>删除</a>
        </Space>
      ),
    },
  ];

点击图片实现放大图片预览

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

<Table columns={columns} dataSource={alkanonesData} pagination={{ pageSize: 4 }} />

截图

4、展示效果视频

图片效果