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

const columns = [ {
 title: "姓名",
 dataIndex: "name",
 width: 100 , // table列定宽 可不设
  fixed: "left" // 固定列的位置
 },
 {
 title: "联系电话",
 width: 150,
 dataIndex: "phone"
 },
 {
 title:"显示一张图片",
 width:150，
 dataIndex:"img"，
 render：(text)=> 
 },
 {
 title:"显示多张图片",
 width:400，
 dataIndex:"imgs"，
 render: text => {
 // text是后端传的多个url，需要逗号分隔再显示图片
  if (text) {
  return (
   

   {text.split(",").map((items, index) => {
    return (
    

      {
      InitImageViwer(); // 点击放大图片
     }}
     />
    
    );
   })}
   
  );
  }
 },
]

// 点击放大图片预览
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 表格滚动
实现效果图：
点击图片放大预览效果：
补充知识：React中antd框架下upload多个图片简单上传
antd的上传组件也是挺好康的，预览、删除也特别方便。适合表单上传。
查询资料多个上传处理 不明确，我就在下面name为file的input隐藏域内储存多个图片上传
这行代码是限制多个图片上传的总数，这里目前是不能超过6张图片，到达六张图片后，点击上传的按钮将会消失。
{this.props.tAccessory >= 6 ? null : uploadButton}
点击眼睛会弹出modl框扩大显示图片。
全文代码如下，稍加修改即可使用。
import React from 'react';
import { Form, Input,Upload,Icon,Modal} from 'antd';
import { connect } from 'dva';
const FormItem = Form.Item;
const { TextArea } = Input;
function getBase64(file) {
 return new Promise((resolve, reject) => {
 const reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = () => resolve(reader.result);
 reader.onerror = error => reject(error);
 });
}
class AddMa extends React.Component {
 state = {
 value: '',
 previewVisible: false,
 previewImage: '',
 fileList:[],
 };
 onChange = ({ target: { value } }) => {
 this.setState({ value });
 };
//场地图片
 handleCancel = () => this.setState({ previewVisible: false });
 handlePreview = async file => {
 if (!file.url && !file.preview) {
  file.preview = await getBase64(file.originFileObj);
 }
 this.setState({
  previewImage: file.url || file.preview,
  previewVisible: true,
 });
 console.log(file);
 };
 handleChange = ({ fileList }) => this.setState({ fileList:fileList });
 beforeUpload=(file)=>{
  this.setState(({
  fileList: [this.state.fileList, file],
  }));
 return false;
 }
 render() {
 const { previewVisible, previewImage, fileList,value} = this.state;
 const uploadButton = (
  

  
  
Upload
  
 );
 const { getFieldDecorator } = this.props.form;
 const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 10 },
 };
 const props={fileList};
 return (
  

  

   
   {getFieldDecorator('fileList',{initialValue:this.props.tAccessory,valuePropName: 'file'})
   (
    

    
     {this.props.tAccessory >= 6 ? null : uploadButton}
    
    
     
    
    
   )}
   
  //这里是多个上传获取到的PhotoList 
   
   {getFieldDecorator('file',{initialValue:this.props.tAccessory,valuePropName: 'file'})
   (
    
   )}
  
  
 );
 }
}

function mapStateToProps(state) {
 const {csIntro,arPicture,tCsInfo,modelResult,tAccessory} = state.cusy;
 return {csIntro,arPicture,tCsInfo,modelResult,tAccessory};
}

export default connect(mapStateToProps)(Form.create()(AddMa));

                
                            

                

                    上一篇：使用selenium-java封装chrome、firefox、phantomjs实现爬虫

                
                

                    下一篇：使用js实现一个淘宝浏览商品放大镜功能                
            

                
                
相关内容
                
            

                

            

        
        

            
            

                
                

                    
                    

                        
                        热门资讯
                        
                    
                    
                
                
            
            
            
            


                                
                

                    
                    

                        

                    
                    
                    
                    

                        空调连续工作多久需要停机休息
                        空调连续工作的时间取决于多个因素，包括空调的型号、功率、使用环境和维护情况等。一般来说，空调可以连续...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        空调哪个符号是除湿的
                        空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异，但一般来说，除湿...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        格力空调多长时间加一次氟利昂
                        1、一般情况下，空调对氟利昂的使用量是非常小的，所以在空调使用了四年左右的时候再考虑加也没问题。2、...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        空调用多长时间需要加氟一次
                        一般情况下是五年。当出现以下这几种情况时，空调才需要加氟。1、空调的室内机和室外机各有两个接口，当接...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        格调生活·C标思享荟：卡萨帝在...
                        9月12日的郑州龙湖金融岛，夜风轻拂，灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        品牌价值破千亿、高端份额持续领...
                        9月12日，“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        空调主板坏了修800还是换新的
                        空调主板坏了是修还是换新，需要考虑多个因素，以下是一些建议：1. 维修成本：如果维修费用较低，比如 ...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        空调开多久需要休息多长时间
                        问题：空调开多久需要休息多长时间回答：1、在使用空调的过程中，一般空调开7~8个小时左右需要休息2~...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        中央空调多长时间清洗一次
                        1、一般空调开机前清洗一次即可，空调开机中间时段再清洗一次，空调关机时清洗一次，这样比较合理。2、空...
                    
                    
                
                                
                

                    
                    

                        

                    
                    
                    
                    

                        中央空调氟利昂多久加一次
                        看空调制热和制冷程度，很多人的观点认为氟利昂必须一年放一次，其实这个观点是错误的，理解上面有点偏差，...
                    
                    
                
                
            
            
        
        
    

    
    

        
        

            2026 ©
            太卓网叶县生活网 编程知识网  开创游戏网 菜丁网奥飞商务网  众乐知识网乐活家能源100网 泰达科技太卓开发网元素科技网八零商务网土豆游戏网        
        
        
        

                        

                科技资讯
            
                        

                技术分享
            
                        

                程序开发
            
                        

                设备维修