title: React js unable to show images on the frontend
body: <p>What am I doing wrong ?
  I'm using react.js with node.js, express and multer for the image upload, for my database im using MYSQL.
  I can upload my image to the public folder and to my mysql database.
  <a href="https://i.stack.imgur.com/3lwOc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3lwOc.png" alt="enter image description here" /></a>
  So as you can see I console.log the data, that gives me an array where you can see the images + image name.</p>
  <p>But im unable to show it on the frontend.
  This is my frontend</p>
  <pre><code>const [file, setFile] = useState()
      const [fileName, setFileName] = useState('')
  
      const saveFile = (e) =&gt; {
          setFile(e.target.files[0])
          setFileName(e.target.files[0].name)
      }
  
      const uploadFile = async (e) =&gt; {
          e.preventDefault()
          const formData = new FormData()
          formData.append('file', file)
          formData.append('fileName', fileName)
          try {
              const res = await axios.post('http://localhost:3001/get/upload',
                  formData
              )
              console.log(res)
          } catch (err) {
              console.log(err)
          }
      }
  
      const [postList, setPostList] = useState([])
  
      useEffect(() =&gt; {
          axios.get('http://localhost:3001/api/get').then((data) =&gt; {
              console.log(data)
              setPostList(data.data)
          })
      }, [])
  
  return (
              &lt;div className=&quot;gpt3__footer section__padding&quot; id=&quot;bots&quot;&gt;
                  &lt;div className=&quot;gpt3__footer-heading&quot;&gt;
                      &lt;h1 className=&quot;gradient__text&quot;&gt;Sind Sie bereit Ihren Kundenservice zu automatisieren ?&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;input
                          type='file' onChange={saveFile}
                      /&gt;
                      &lt;button onClick={uploadFile}&gt;upload&lt;/button&gt;
                      &lt;img src={file}/&gt;
                      &lt;div className=&quot;post&quot;&gt;
                          {postList.map((val, key) =&gt; {
                              return (
                                  &lt;div className=&quot;Post&quot; key={key}&gt;
                                      &lt;p&gt;{val.image}&lt;/p&gt;
                                  &lt;/div&gt;
                              )
                          })}
                      &lt;/div&gt;
                      &lt;button className=&quot;kaufenButton&quot; onClick={toggleModalUnt}&gt;Jetzt testen&lt;/button&gt;
                  &lt;/div&gt;
  )
  </code></pre>
  <p>This is my backend</p>
  <pre><code>
  app.use(express.static(__dirname+ './public'))
  
  const storage = multer.diskStorage({
      destination: (req, file, cb) =&gt; {
          cb(null, './public')
      },
      filename: (req, file, cb) =&gt; {
          cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
      }
  })
  
  const upload = multer({
      storage: storage
  })
  
  app.post('/get/upload', upload.single('file'), (req, res) =&gt; {
      if (!req.file) {
          console.log('No file uploaded')
      } else {
          console.log(req.file.filename)
          const imgsrc = req.file.filename
          const insertData = 'INSERT INTO users (images) VALUES (?)'
          db.query(insertData, [imgsrc], (err, result) =&gt; {
              if (err) throw err
              console.log('file uploaded')
          })
      }
  })
  
  app.get('/api/get', (req, res) =&gt; {
      db.query(
          'SELECT * FROM users',
          (err, result) =&gt; {
              if (err) {
                  console.log(err)
              }
              res.send(result)
          }
      )
  })
  </code></pre>
  <p>Thanks in advance.</p>