Question

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

我的档案，
recipe.ts

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

配方-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;
}

配方-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>

配方-list.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')
    ];
}

配方-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 =＆＃34; {{recipe.imagePath}}＆＃34;。

图像未以angular2显示

1 个答案: