title: ReactJS + Webpack: Why Uncaught Error: Cannot find module "../media/interiorTest.jpg"?
body: <p>I have a Webpack running with ReactJS, and I am attempting to grab an image and display it but getting an error: <code>Uncaught Error: Cannot find module "../media/interiorTest.jpg"</code> </p>
  
  <p>And here is what I tried: </p>
  
  <pre><code>  &lt;div&gt;
      &lt;img src={require("../media/interiorTest.jpg")}/&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And the directory tree is (I am trying to fetch <code>interiorTest.jpg</code> from <code>home-page.js</code>):</p>
  
  <p><a href="https://i.stack.imgur.com/HVKGf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HVKGf.png" alt="enter image description here"></a></p>
  
  <p>And my <code>webpack.config.js</code> is:</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  const config = {
    context: __dirname,
    entry: './src/index.js',
    output: {
      path: __dirname,
      filename: 'bundle.js'
    },
    module: {
      loaders: [
        {
          exclude: /node_modules/,
          test: /\.(js|jsx)$/,
          loader: 'babel'
        },
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract('css!sass')
        }
      ]
    },
    devServer: {
      historyApiFallback: true,
      contentBase: './'
    },
    plugins: [
      new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify('production') } }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false },
        output: {comments: false },
        mangle: false,
        sourcemap: false,
        minimize: true,
        mangle: { except: ['$super', '$', 'exports', 'require', '$q', '$ocLazyLoad'] }
      }),
      new ExtractTextPlugin('src/public/stylesheets/app.css', {
        allChunks: true
      })
    ]
  };
  
  module.exports = config;
  </code></pre>