在反应中显示图像阵列？

问题描述：

我是新来的反应，我想显示反应网页中的图像数组。该阵列具有统计数量的图像。在反应中显示图像阵列？

render: function() { 
    console.log("edit"); 
    return (
     <div> 
      <Button bsStyle="info" id="qslist" onClick={this.show}>View</Button> 
      <Button bsStyle="info" id="qslist" className="delete" onClick={this.handleDelete}>Delete</Button> 
      <Button bsStyle="info" id="qslist" className="disable" onClick={this.handleDisable}>Disable</Button> 
      <Modal show={this.state.showModal} onHide={this.close}> 
       <Modal.Header closeButton> 
        <Modal.Title></Modal.Title> 
       </Modal.Header> 
       <Modal.Body> 
        <div id="formdata1">Name:<b>{name}</b></div> 
        <div id="formdata1">User:<b>{user}</b></div> 
        <div id="formdata1">Radius:<b>{radius}</b></div> 
        <div id="formdata1">Status:<b>{status}</b></div> 
        <div id="formdata1">Type:<b>{type}</b></div> 
        <div id="formdata1">Latitude:<b>{lat}</b></div> 
        <div id="formdata1">Longitude:<b>{long}</b></div> 
        <div id="formdata1">Description:<b>{caption}</b></div> 
        <div id="formdata1">Schedule:<b>{schedule}</b></div> 
        <div id="formdata1">Duration:<b>{duration}</b></div> 
        <div id="formdata1">lshare:<b>{lshare}</b></div> 
        <div id="formdata1">Id:<b>{listingid}</b></div> 
        <Image src={imgs} rounded /> 
       </Modal.Body> 
       <Modal.Footer> 
        <Button onClick={this.close} bsStyle="info" id="solbutton">Close</Button> 
       </Modal.Footer> 
      </Modal> 
     </div> 
    ); 
}

在上面的代码中，我试图显示图像数组。目前只能显示一张图片<Image src={image} rounded/>。如何显示许多图像。该阵列图像是

[ 
    'http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg', 
    'http://wallpaper-gallery.net/images/image/image-13.jpg', 
    ... 
]

你想使画廊样的事情，显示图像一拜一？ –

是的，一旦点击查看按钮，数据库中的所有图像都会显示在弹出式模型窗口中。 – Daniel

@Saran：提供一些关于你的问题的更多细节，而不是在评论中，而是在问题中。它会增加您获得良好答案的机会。 –

答

如果你只是想显示图像的阵列（无论何种原因），您可以执行以下操作：

在渲染方法的开头（旁边的控制台日志）补充一点：

var images = imgs.map(function(image) { 
return (<Image src={image} rounded />); 
});

这将你的路阵列映射到图像组件阵列（其中IMGS就像是你指定的路径的数组）。

然后，替换

<Image src={imgs} rounded/>

随着

{images}

就是这样。如果你想要某种转盘

，有许多封装形式（example），在那里你可以定义是这样的：

<ImageGallery items={imgs} />

在反应中显示图像阵列？

相关推荐