title: React render image from prop
body: <p>I am trying to pass an image url to the children and then require it as follows: </p>
  
  <pre><code>import React, {Component} from 'react';
  
  let color = require('../../css/colors.js');
  
  let defaultStyle = {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexBasis: 'calc(50% - 40px)',
      flexDirection: 'column',
      margin: '20px',
      backgroundColor: color.blueCard
  }
  
  class Card extends Component {
  
      render() {
          const imgUrl = require(this.props.background);
          return (&lt;div style={{
                  ...defaultStyle
              }}&gt;
              &lt;img src={imgUrl} alt="img"/&gt;
          &lt;/div&gt;);
      }
  }
  export default Card;
  </code></pre>
  
  <p><code>this.props.background</code> looks something like this: <code>"../../img/album1.jpg"</code></p>
  
  <p>When im starting the React App i get the following error message on <code>const imgUrl = require(this.props.background);</code>:</p>
  
  <pre><code>Error: Cannot find module "."
  webpackMissingModule
  </code></pre>
  
  <p>The React App was created using <code>create-react-app</code>. My guess is that webpack cant parse the resource file. </p>