title: Module parse fails for .jpg in <img> for React component?
body: <p>I want to show an image on my website I'm building using react. Here is the component source code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import style from './styles/AboutMeStyle.css';
  
  export default class AboutMe extends Component{
      render(){
          return (
              &lt;div&gt;
                  &lt;img src={require ('./images/ProfilePic.jpg')}align="middle"/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>The file seems to be found but I keep getting an exception stating that the module parse failed...? Here is a text output of the error from the terminal:</p>
  
  <pre><code>Module parse failed: /Users/megan/Desktop/Personal Website/client/components/images/ProfilePic.jpg
  Unexpected character (1:0)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected character (1:0)
  ...
  </code></pre>
  
  <p>Am I writing the code wrong? Or am I missing a module? I've installed image-webpack-loader but it didn't seem to do anything...Here is my webpack.config.js : </p>
  
  <pre><code>module.exports = {
      entry: './client/index.js',
      output: {
          path: __dirname + '/public/js',
          filename: 'bundle.js'
      },
      devtool: 'source-map',
      stats: {
          colors: true,
          reasons: true
      },
      module: {
          loaders: [
              {
                  test: /\.jsx?$/,
                  exclude: /(node_modules)/,
                  loaders: ['babel']
              },
              {
                  test: /\.css$/,
                  loaders: ['style-loader', 'css-loader']
              }
          ]
      }
  }
  </code></pre>