title: How does the following `src='${loadingGif}'` work inside angular component
body: <p>I'm reading the book <code>ng-book</code> on angular 2 and there is the following:</p>
  
  <pre><code>let loadingGif: string = ((&lt;any&gt;window).__karma__) ? '' : require('images/loading.gif');
  
  @Component({
    selector: 'youtube-search',
    template: `
    &lt;div class='container'&gt;
        &lt;div class="page-header"&gt;
          &lt;h1&gt;YouTube Search
            &lt;img
              style="float: right;"
              *ngIf="loading"
              src='${loadingGif}' /&gt;
          &lt;/h1&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>I'm interested in this part:</p>
  
  <pre><code>src='${loadingGif}'
  </code></pre>
  
  <p>The short note in the book says the following:</p>
  
  <blockquote>
    <p>Notice that our img has a src of ${loadingGif} - that loadingGif
    variable came from a require statement earlier in the program. Here
    we’re taking advantage of webpack’s image loading feature. If you want
    to learn more about how this works, take a look at the webpack config
    in the sample code for this chapter or checkout
    image-webpack-loader⁴².</p>
  </blockquote>
  
  <p>But there are no details. Can somebody please how does it all work?</p>