本篇文章為大家展示了使用react antd實現(xiàn)在表格中渲染一張或多張圖片，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領域包括成都網(wǎng)站建設、成都網(wǎng)站制作、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

使用antd table中顯示一張圖片，代碼如下：

const columns = [ {
 title: "姓名",
 dataIndex: "name",
 width: 100 , // table列定寬 可不設
  fixed: "left" // 固定列的位置
 },
 {
 title: "聯(lián)系電話",
 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 }} /> 

網(wǎng)站標題：使用reactantd實現(xiàn)在表格中渲染一張或多張圖片-創(chuàng)新互聯(lián)
文章源于：http://jinyejixie.com/article12/dpohgc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、服務器托管、網(wǎng)站改版、全網(wǎng)營銷推廣、外貿網(wǎng)站建設、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)