title: Webpack bundles PNG image but React won't display it
body: <p>As the title says, webpack builds without complaint. And I can see the image file has been copied to the bundle output <code>dist</code> directory, so presumably the <em>test</em> part of the config is correct at least. </p>
  
  <p>But the webpage can't locate it, it's just a broken image square. I must have read about 15 existing SO posts but here I am. I've tried both <code>import</code> version and <code>require</code> version:</p>
  
  <p><code>import red_light from './red_light.png';</code>  </p>
  
  <p>... or alternatively...</p>
  
  <p><code>const red_light = require('./red_light.png');</code></p>
  
  <p>with</p>
  
  <p><code>&lt;img src={red_light} /&gt;</code></p>
  
  <p>Both fail to locate the image and load it onto the page. </p>
  
  <p>Also tried directly requiring in the JSX:  </p>
  
  <p><code>&lt;img src={require('./red_light.png')} /&gt;</code>.</p>
  
  <p>Fails too.</p>
  
  <p>Webpack rules config:</p>
  
  <pre><code>...
  rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {loader: "babel-loader"}
        },
        {
          test: /\.css$/,
          use: [
            "style-loader",
            {
              loader: "css-loader",
              options: {
                modules: false
              }
            }
          ]
        },
        {
          test: /\.(jpg|png|svg)$/,
          loader: 'file-loader',
          // options: {
          //   name: '[path][name].[ext]',
          // },
        },
      ]
  ...
  </code></pre>
  
  <p>I don't know what could be causing my setup not to work. </p>
  
  <p>This seemed interesting to me: in browser when inspecting the emitted html, it just says <code>src=[Object module]</code> instead of any URL. Maybe this is normal.  When I hover my mouse it just says 'Could not load the image'.</p>
  
  <p>Edit: I've discovered it works in <em>dev</em> mode but not <em>prod</em> mode, i.e. when everything's in RAM it all works out, but if I do an <code>npm run build</code> it emits the image(s) to (a sub-directory of) the configured webpack output directory, but the relative imports don't appear to be working inside the target <code>index.bundle.js</code>.  The prod html file can import the emitted js index file fine of course, since the page loads. I don't see why webpack doesn't have enough information to configure the correct relative import since i) it emitted the png file itself and ii) it can see the react source code and knows where every component is relative to the corresponding entry point.  Basically to make it work it looks like in prod I would have to import the png file into the react file but for the <code>src</code> attribute inside the <code>img</code> tag, manually write in an relative path as an external file.</p>
  
  <p><code>url-loader</code> is working fine, however, as there's no vector for confusion with relative imports in target versus src.</p>