mysql - 在 react 中显示图像数组？

Question

我是 react 新手，我想在 react 网页中显示图像数组。该数组具有统计图像数量。

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',
    ...
]

Answer 1

如果您只想显示一组图像(无论出于何种原因)，您可以执行以下操作:

在渲染方法的开头(控制台日志旁边)添加以下内容:

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

这会将您的路径数组映射到图像组件数组(其中 imgs 是您指定的路径数组)。

然后，替换

<Image src={imgs} rounded/>

与

{images}

就是这样。

如果您想要某种轮播，有许多可用的软件包( example )，您可以在其中定义类似的内容:

<ImageGallery items={imgs} />