使用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 }} />实现效果图：
点击图片放大预览效果：
