title: Very simple: requiring images in webpack and Angular 2
body: <p>I am having some trouble requiring images in my Angular 2 webpack applicaiton.</p>
  
  <p>I have tried three or four image loaders but I don't seem to be able configure them properly and the result in the HTML is incorrect.</p>
  
  <p>For example, at the moment I have:</p>
  
  <pre><code>&lt;img src='${require("../images/logo.png")}'&gt;
  </code></pre>
  
  <p>The file containing this image is part of a template which is required like this:</p>
  
  <pre><code>@Component({
      selector: 'appstore-app',
      directives: [ ...ROUTER_DIRECTIVES ],
      styles: [require('../sass/appstore.scss').toString()],
      template: require('./app.component.html')
  })
  </code></pre>
  
  <p>This results in an error in the browser:</p>
  
  <pre><code>GET: http://localhost:8080/$%7Brequire(%22../images/logo.png%22)%7D 
  </code></pre>
  
  <p>My loader for images image my webpack.config.js looks like this:</p>
  
  <pre><code>{ test: /\.(png|jpg|gif)$/, loader: "url-loader?limit=50000&amp;name=[path][name].[ext]" }
  </code></pre>
  
  <p>I may well be muddling syntaxes here but as I've said I've tried a few methods. This doesn't work. The $require makes it into the HTML verbatim without being transformed!</p>
  
  <p>How do I either copy the images to the build folder or package them as a DataURL?</p>
  
  <p>Please help!</p>