CODEWITHSUNDEEP
angularangular2-template
Kiran
Kiran

Reputation: 1531

Image is not getting displayed in angular2

Just started learning angular 2 using a tutorial.In my app,text is getting displayed but for image I am getting 404 error.Image folder is two levels up to my typescript files so I used ../../

My files,
recipe.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>

recipe-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')
    ];
}

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>

Upvotes: 0

Views: 1284

Answers (1)

JayChase
JayChase

Reputation: 11525

It could just be a casing issue. The property on Recipe is imagepath but in recipe-item.html the binding is src="{{recipe.imagePath}}".

Upvotes: 1

Related Questions