图像未以 angular2 显示

Question

刚开始使用教程学习 Angular 2。在我的应用程序中，文本正在显示，但对于图像我得到 404 错误。图像文件夹是我的打字稿文件的两个级别，所以我使用了 ../../

我的文件，
食谱.ts

export class Recipe {
    constructor(public name, public description, public imagepath){}
}

recipe-item.component.ts

import {Component,Input} from "@angular/core";    
import {Recipe} from '../recipe'

@Component({
    moduleId:module.id,
    selector: "recipeitem",
    templateUrl: "./recipeitem.html"
})
export class RecipeItemComponent {
    @Input() recipe:Recipe;
}

recipe-item.html

<a href="#" class="list-group-item clearfix">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{recipe.name}}</h4>
    <p class="list-group-item-text">{{recipe.description}}</p>
  </div>
  <span class="pull-right">
      <img class="img-responsive" src="{{recipe.imagePath}}" alt="No Image"/>
  </span>
</a>

配方列表.component.ts，

import {Component} from "@angular/core";    
import {Recipe} from '../recipe'

@Component({
    moduleId:module.id,
    selector: "recipeList",
    templateUrl: "./recipeList.html"
})
export class RecipeListComponent {
    constructor() {}
    recipes:Recipe[]=[
        new Recipe('Gobi','Very Tasty','../../images/gobi.jpg'),
        new Recipe('jamoon','Sweet','../../images/jamoon.jpg')
    ];
}

recipe-list.component.html

<div class="row">
    <div class="col-xs-12">
        <a class="btn btn-success">New Recipe</a>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <ul class="list-group">
            <recipeitem *ngFor="let recipe of recipes" [recipe] ="recipe"></recipeitem>
        </ul>
    </div>
</div>

Answer 1

这可能只是一个外壳问题。 Recipe 上的属性是 imagepath，但在 recipe-item.html 中绑定是 src="{{recipe.imagePath}}"。