title: How to import images from JSON data into create-react-app
body: <p>So I have JSON data that includes the path to the images thats located in my public folder (/public/images). Like so,</p>
  
  <pre><code>const data = [
  {
      "key": 1,
      "name": "Goal Squad",
      "techs": ["React &amp; Redux", "Express", "MySQL"],
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
      "image": "../public/images/test.jpg"
  },
  {
      "key": 2,
      "name": "WesterosCraft",
      "techs": ["React &amp; Redux", "Express", "MySQL"],
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et",
      "image": "../public/images/test.jpg"
  },
  </code></pre>
  
  <p>And based on reading a few other similar situations, this is what I've tried in my component;</p>
  
  <pre><code>class Card extends Component  {
  
  render() {
      const { name, description, image } = this.props;
      const items = Object.values(this.props.techs);
  
      console.log(this.props)
  
      return (
          &lt;CardWrapper&gt;
              &lt;Row&gt;
                  &lt;Column colmd6 colsm12&gt;
                      &lt;Header card&gt;{name}&lt;/Header&gt;
                      &lt;TechList&gt;{items.map(tech =&gt;
                          tech
                      ).join(' / ')}&lt;/TechList&gt;
                      &lt;Text regular&gt;{description}&lt;/Text&gt;
                      &lt;Button&gt;Visit Website&lt;/Button&gt;
                  &lt;/Column&gt;
  
                  &lt;Column colmd6 colsm12&gt;
                      &lt;img src={require(`${image}`)} alt={name}/&gt;
                  &lt;/Column&gt;
              &lt;/Row&gt;
          &lt;/CardWrapper&gt;
      )
  }
  </code></pre>
  
  <p>But create-react-app throws the error "Error: Cannot find module '../public/images/test.jpg'</p>
  
  <p>Any hints?</p>