title: how to fetch and display images from database in react app
body: <p>i'm trying to load a list of wallpapers from local storage that i already post them  and saved their paths in mongoDB. </p>
  
  <p>So i'm trying to loop through the array of paths and use each path as  src in each img tag </p>
  
  <p>the main.js component :</p>
  
  <pre><code>import React, { Component } from 'react'
  
  export default class Main extends Component {
      state = {
          data : []
      }
      componentDidMount(){
  
          fetch('http://localhost:5000/').then(res =&gt; res.json())
          .then(data=&gt; this.setState({data}))
  
      }
      render() {
  
          console.log(this.state.data)
  
          return (
              &lt;div&gt;
                  &lt;h1&gt;Main&lt;/h1&gt;
                  {this.state.data ? this.state.data.map(img =&gt; 
  (&lt;div key={img._id}&gt;{img ? &lt;img src={require(`${img.img.path}`)} 
  alt={img.img.name}/&gt;:&lt;span&gt;deleted&lt;/span&gt;}&lt;/div&gt;)): 
  &lt;h3&gt;loading&lt;/h3&gt;}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>the server code :</p>
  
  <pre><code>  server.get('/', (req, res)=&gt;{
          Wallpaper.find({}, (err, result)=&gt;{
              if(err) {
                  res.json({msg: err})
              }else{
                  res.json(result)
              }
          })
      })
  </code></pre>
  
  <p>it should return the images in the uploads folder in the react app but it returns this error:</p>
  
  <pre><code>Error: Cannot find module '/home/ahdy/Workspace/Wally/wallcraft/public/uploads/ak47456193147469824_n.jpg'
  </code></pre>