title: Importing an image dynamically in React Component
body: <p>I'm trying to dynamically load an image in some React Component. I'm using <code>require</code> instead of simply passing the paths in order to improve performance. </p>
  
  <p>I gathered I could use an inline <code>require</code> and it does work. However, when I try to pass as a <code>prop</code> instead, I get errors. </p>
  
  <p>What am I doing wrong? </p>
  
  <p><strong>EDIT:</strong> Turns out both work, I was doing something <em>else</em> wrong which was throwing the error. (Bonus question still applies tho)</p>
  
  <pre><code>import React from 'react';
  
  // This works
  export SomeComponent = () =&gt; (
    &lt;div&gt;
      &lt;img src={require(`../images/my-logo.svg`)} /&gt;
    &lt;/div&gt;
  )
  
  // This works too!
  export SomeComponent = ({image}) =&gt; (
    &lt;div&gt;
      &lt;img src={require(`../images/${image}`)} /&gt;
    &lt;/div&gt;
  )
  
  &lt;SomeComponent image="my-logo.svg" /&gt;
  </code></pre>
  
  <p><strong>Bonus question</strong>: Can this be done with ES6 <code>import</code> vs CommonJs <code>require</code>?</p>