title: how to import images via props in react and use the 'import' path
body: <p>i'm passing the following as props.</p>
  
  <pre><code>const people=['Eliana','Stefania','Ahmed']
  
  {
    people.map(function(name, index){
      return &lt;Person item={index} name={name}/&gt;;
    })
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Eliana from '../assets/imgs/people/eliana.png'
  import Stefania from '../assets/imgs/people/stefania.png'
  import Ahmed from '../assets/imgs/people/ahmed.png'
  
  export default class Person extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;img src={this.props.name} alt=''/&gt;
       &lt;li key={this.props.item}&gt;{this.props.name}&lt;/li&gt;
     &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>what i'm doing here is using the above strings in the array to pass to a component and then generate images from that component by using the corresponding path, however when i pass the props, they display as strings, like Eliana would display as is in the img src?</p>
  
  <p>how do i get corresponding paths? some kind of string conversion probably?
  i bet this is an easy one!</p>