如何在 Angular2提供图像？

我试图把我的资产文件夹中的一个图像的相对路径在我的 Angular2应用程序的图像 src 标签。我将组件中的一个变量设置为“ fullImagePath”，并在模板中使用该变量。我已经尝试了很多不同的可能的路径，但似乎不能让我的形象。Angular2中是否有一些特殊的路径总是相对于像 Django 中的静态文件夹？

组件

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() {
}


}

我还把图片放在同一个文件夹作为这个组件，因此，因为模板，并在同一个文件夹的 css 是工作，我不知道为什么一个类似的相对路径的图像不工作。该组件与位于同一文件夹中的图像是同一个组件。

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 * 我省略了节点模块文件夹以节省空间

├── 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