title: Importing an image into an <src> tag in React.js when the image name is not known in advance
body: <p>I have a component in React which displays (or doesn't at the moment) an image within an src tag. </p>
  
  <p>The file path &amp; file name of the image is passed via props after being selected by the user, so I can't do an import at the top of the file. Apparently, I should be able to do something like src={require(file)} but this causes webpack to throw a hissy fit and give the following error: Error: cannot find module "."</p>
  
  <p>As an e.g., a typical filepath/filename I pass to the component is: '../../../images/black.jpg'</p>
  
  <p>This is a stripped-down version of the code in question:</p>
  
  <pre><code>    import React, { Component } from "react";
  
  class DisplayMedia extends Component {
    render() {
      return (
          &lt;div className="imgPreview"&gt;
          &lt;img src={this.props.file} alt="piccy" /&gt;
          &lt;/div&gt;
      );
    }
  }
  
  export default DisplayMedia;
  </code></pre>