尝试渲染发布到MySQL DB的图像

时间:2019-09-01 01:16:47

标签: javascript mysql node.js reactjs express

我能够将图像路径发布到数据库,但是当从数据库中获取图像时,似乎无法将实际图像呈现到页面上。正在返回文件路径,但未呈现任何内容。我想我需要映射数组,但不确定如何。我现在反应还很新,请客气。哈哈!

我尝试将图像状态保存在一个变量中,并将该变量称为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调用中获取了文件路径。我想获取实际图像。

0 个答案:

没有答案