[html] How to serve up images in Angular2?

I am trying to put the relative path to one of my images in my assets folder in an image src tag in my Angular2 app. I set a variable in my component to 'fullImagePath' and used that in my template. I have tried many different possible paths, but just cannot seem to get my image up. Is there some special path in Angular2 that is always relative to a static folder like in Django ?

Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg'
  }

  ngOnInit() {
  }

}

I also put the picture into the same folder as this component, so since the template, and css in the same folder is working I'm not sure why a similar relative path to the image is not working. This is the same component with the image in the same folder.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = './therealdealportfoliohero.jpg'
  }

  ngOnInit() {
  }

}

html

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

app tree * I left out the node modules folder to save space

+-- README.md
+-- angular-cli.json
+-- e2e
¦   +-- app.e2e-spec.ts
¦   +-- app.po.ts
¦   +-- tsconfig.json
+-- karma.conf.js
+-- package.json
+-- protractor.conf.js
+-- src
¦   +-- app
¦   ¦   +-- app.component.css
¦   ¦   +-- app.component.html
¦   ¦   +-- app.component.spec.ts
¦   ¦   +-- app.component.ts
¦   ¦   +-- app.module.ts
¦   ¦   +-- hero
¦   ¦   ¦   +-- hero.component.css
¦   ¦   ¦   +-- hero.component.html
¦   ¦   ¦   +-- hero.component.spec.ts
¦   ¦   ¦   +-- hero.component.ts
¦   ¦   ¦   +-- portheropng.png
¦   ¦   +-- index.ts
¦   ¦   +-- shared
¦   ¦       +-- index.ts
¦   +-- assets
¦   ¦   +-- images
¦   ¦       +-- therealdealportfoliohero.jpg
¦   +-- environments
¦   ¦   +-- environment.dev.ts
¦   ¦   +-- environment.prod.ts
¦   ¦   +-- environment.ts
¦   +-- favicon.ico
¦   +-- index.html
¦   +-- main.ts
¦   +-- polyfills.ts
¦   +-- styles.css
¦   +-- test.ts
¦   +-- tsconfig.json
¦   +-- typings.d.ts
+-- tslint.json

In angular only one page is requested from server, that is index.html. And index.html and assets folder are on same directory. while putting image in any component give src value like assets\image.png. This will work fine because browser will make request to server for that image and webpack will be able serve that image.

I am using the Asp.Net Core angular template project with an Angular 4 front end and webpack. I had to use '/dist/assets/images/' in front of the image name, and store the image in the assets/images directory in the dist directory. eg:

 <img  class="img-responsive" src="/dist/assets/images/UnitBadge.jpg">

If you do not like assets folder you can edit .angular-cli.json and add other folders you need.

  "assets": [
    "assets",
    "img",
    "favicon.ico"
  ]

Just put your images in the assets folder refer them in your html pages or ts files with that link.

Add your image path like fullPathname='assets/images/therealdealportfoliohero.jpg' in your constructor. It will work definitely.