title: Angular2 + webpack not displaying images
body: <p>I have followed the <a href="https://angular.io/docs/ts/latest/guide/webpack.html" rel="nofollow noreferrer">Angular2 webpack tutorial</a>, but seems like the app cannot load any image. This is the directory structure of my app:</p>
  
  <pre><code>...
  
  /dist/
  /src/assets/images/
  /src/assets/css/
  
  ...
  </code></pre>
  
  <p>And this is the webpack configuration on file <strong>config/webpack.common.js</strong>:</p>
  
  <pre><code>var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var helpers = require('./helpers');
  
  module.exports = {
    entry: {
      'polyfills': './src/polyfills.ts',
      'vendor': './src/vendor.ts',
      'app': './src/main.ts'
    },
  
    resolve: {
      extensions: ['.ts', '.js']
    },
  
    module: {
      rules: [
        {
          test: /\.ts$/,
          loaders: [{
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('src', 'tsconfig.json') }
          } , 'angular2-template-loader']
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
          loader: 'file-loader?name=assets/[name].[hash].[ext]'
        },
        {
          test: /\.css$/,
          exclude: helpers.root('src', 'app'),
          loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
        },
        {
          test: /\.css$/,
          include: helpers.root('src', 'app'),
          loader: 'raw-loader'
        }
      ]
    },
  
    plugins: [
      // Workaround for angular/angular#11580
      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        helpers.root('./src'), // location of your src
        {} // a map of your routes
      ),
  
      new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'vendor', 'polyfills']
      }),
  
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      })
    ]
  };
  </code></pre>
  
  <p>Now if I try to add some image to the templates:</p>
  
  <pre><code>&lt;img src="/assets/images/hp-logo.png"&gt;
  </code></pre>
  
  <p>I am always getting the following error during compilation (when running <code>npm start</code>):</p>
  
  <pre><code>ERROR in ./src/app/templates/dashboard.component.html
  Module not found: Error: Can't resolve './assets/images/hp-logo.png' in '/frontend/src/app/templates'
   @ ./src/app/templates/dashboard.component.html 1:582-620
   @ ./src/app/components/dashboard.component.ts
   @ ./src/app/modules/app.module.ts
   @ ./src/main.ts
   @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.ts
  </code></pre>
  
  <p>I guess it has something to do with the <strong>file-loader</strong> but after trying different configuration I couldn't get it to work.</p>
  
  <p>Somebody can help me out on this one?</p>