ReactJS + Webpack: Why Uncaught Error: Cannot find module "../media/interiorTest.jpg"?
<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>