title: Angular CLI - How to reference image paths in reusable components
body: <p>Need help figuring out how to include images in a reusable component that is referenced in another app.</p>
  
  <p>For example, I have an Angular App, let's call it UI-Common, that contains common components and another Angular App, let's call it Command-Center, that will use those common components.</p>
  
  <p>In UI-Common, there is a component called my-control.component that is defined as follows:</p>
  
  <p><b>[my-control.component.html]</b></p>
  
  <pre><code>&lt;div&gt;
  &lt;img src="assets/images/myImage.png"/&gt;
  &lt;div class"username" *ngIf="user"&gt;
      &lt;p&gt;&lt;strong&gt;{{user.companyName}}&lt;/strong&gt;&lt;/p&gt;
      &lt;p&gt;{{user.firstName + ' ' + user.lastName}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><b>[my-control.component.ts]</b></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  import { User } from '../../models/user';
  
  @Component({
      selector: 'my-control',
      templateUrl: './my-control.component.html',
      styleUrls: ['./my-control.component.scss'],
  })
  export class MyControlComponent {
      @Input() user: User;
  
      constructor() {
  
      }
  }
  </code></pre>
  
  <p>In Command-Center, it adds UI-Common as a dependency in the package.json. A Command-Center component is created and uses my-control.component as follows:</p>
  
  <p><b>[app.module.ts]</b></p>
  
  <pre><code>...
  import { HomeComponent } from './home/home.component';
  import { MyControlComponent } from 'ui-common';
  
  @NgModule({
     declarations: [
        ...,
        HomeComponent,
        MyControlComponent,
        ...
     ],
     ...
  })
  export class AppModule { }
  </code></pre>
  
  <p><b>[home.component.html]</b></p>
  
  <pre><code>&lt;my-control [user]=user&gt;&lt;/my-control&gt;
  &lt;div class="homeContent"&gt;
      blah blah blah...
  &lt;/div&gt;
  </code></pre>
  
  <p><b>[home.component.ts]</b></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { User } from 'ui-common';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  export class HomeComponent {
    user: User;
  
    constructor() {
      this.user = new User();
      this.user.companyName = 'iHeartMedia';
      this.user.firstName = 'John';
      this.user.lastName = 'Smith';
    }
  }
  </code></pre>
  
  <p>The problem is the image on my-control when running from Command-Center does not load at all. This appears to be because the image path being used "assets/images/myImage.png" does not exist in Command-Center. I don't want to save a copy of the image in the Command-Center's assets folder. How do I properly handle images in the common component?</p>