title: How do you add images in Angular 5?
body: <p>So I'm trying to add an image of my logo into an Angular5/ Ionic project. </p>
  
  <p>I'm using an HTML file as a template then I call it in all the files where it needs to be used. </p>
  
  <p>Unfortunately, if I try to add the image in the HTML template file, I get an error in the browser console stating the following: </p>
  
  <p><a href="http://localhost:4200/src/assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png" rel="nofollow noreferrer">http://localhost:4200/src/assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png</a> 404 (Not Found)</p>
  
  <p>I have tried calling the picture from component.ts file with no success
  I have tried creating new folders inside the assets
  I have tried renaming the logo file</p>
  
  <pre><code>&lt;main&gt;
  &lt;section&gt;
  &lt;form [formGroup]="signUpForm" (ngSubmit)="signUp()"&gt;
  &lt;h3&gt;Welcome to Pair Share&lt;/h3&gt;
  &lt;body&gt;
  &lt;img 
  src="/src/assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2- 
  1.png"&gt;
  &lt;/body&gt;
  &lt;p&gt;Lets get started&lt;/p&gt;
  
  &lt;mat-form-field [formGroup]="signUpForm"&gt;
  &lt;input matInput placeholder="Enter your email" [formControl]="email" 
  required&gt;
  &lt;mat-error *ngIf="email.valid"&gt;Not a valid email&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field [formGroup]="signUpForm"&gt;
  &lt;input matInput placeholder="Enter your password" [type]="hide ? 
  'password' : 'text'" [formControl]="password" required&gt;
  &lt;mat-icon matSuffix (click)="hide = !hide"&gt;{{hide ? 'visibility' : 
  'visibility_off' }}&lt;/mat-icon&gt;
  &lt;mat-error *ngIf="password.valid"&gt;Not a valid password&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  
  &lt;button mat-raised-button type="submit" color="accent"&gt;Sign up&lt;/button&gt;
  
  
  &lt;/form&gt;
  &lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>The id is expecting that since this the template file that I'm currently using for a signup page, that after adding an image like in a normal HTML file, it would get the image from its given folder and it would show up the on sign up page. </p>
  
  <p>My signup.component.ts file has a @Component that is importing a template URL from this signup.component.html and this is the following code that I have. </p>
  
  <pre><code>@Component({
    selector: 'app-signup',
    templateUrl: './signup.component.html',
    styleUrls: ['./signup.component.css', '../auth.style.css']
  })
  </code></pre>
  
  <p>So how come my logo is not showing up on the app? </p>
  
  <p>Could anyone please help me out. </p>
  
  <p>PS: Bear with me, I'm new to all of this stuff, and I might have beginner questions.</p>