圖像沒有越來越顯示在angular2

剛剛開始學習角2使用教程。在我的應用程序，文本越來越顯示，但圖像我越來越404錯誤。圖像文件夾是兩個層次，直到我的打字稿文件，所以我用。 ./../圖像沒有越來越顯示在angular2

我的文件，
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>

來源

2016-09-27 Bhanukiran

這可能只是一個套管問題。食譜上的屬性是** imagepath **，但在recipe-item.html中，綁定是** src =「{{recipe.imagePath}}」** – JayChase

我在配方列表文件中創建了一個數組變量，我正在檢索html文件 – Bhanukiran

，從您發佈的代碼中獲取數組中的食譜將具有屬性** imagepath **而不是** imagePath **。 – JayChase

它可能只是一個外殼的問題。食譜屬性是圖像路徑，但在recipe-item.html中，綁定是src =「{{recipe.imagePath}}」。

來源

2016-09-27 08:28:01 JayChase

圖像沒有越來越顯示在angular2

回答

相關問題