我能够将图像路径发布到数据库,但是当从数据库中获取图像时,似乎无法将实际图像呈现到页面上。正在返回文件路径,但未呈现任何内容。我想我需要映射数组,但不确定如何。我现在反应还很新,请客气。哈哈!
我尝试将图像状态保存在一个变量中,并将该变量称为img src。
render() {
const pics = this.state.images;
return (
<div className="app">
<Navbar color="light" light expand="md" className="navBar">
<NavbarBrand href="/">San Francisco Blumen</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<span><NavbarBrand href="/gallery">Gallery</NavbarBrand></span>
</NavItem>
<NavItem>
<span><NavbarBrand href="/blog">Blog</NavbarBrand></span>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Account
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
User Sign In
</DropdownItem>
<DropdownItem>
Admin Sign In
</DropdownItem>
{/* <DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem> */}
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
<div className="addImg">
<form className="imgAdditon" name="imgAdd" type = "file" method="POST" onSubmit={this.onSubmit}>
{/* <input type="file" name="selectedImg" value={this.state.images} onChange={this.onChange}/> */}
<ImageUploader className="fileUploader" value={this.state.images} name="fileUpload"
withPreview={true}
withIcon={true}
buttonText='Choose images'
onChange={this.onDrop}
imgExtension={['.jpg', '.gif', '.png', '.gif']}
maxFileSize={5242880}
fileSizeError="File size too large"
fileTypeError="this file Type is not supported"
/>
<button id="submitButton">Submit</button>
</form>
</div>
<div className = "imgGallery">
{/* <img src={pics}></img> */}
<ImageGallery items={pics} />
</div>
到目前为止,我还没有收到任何错误,只是从fetch调用中获取了文件路径。我想获取实际图像。