Angular 2 - *ngFor <img> tag src attribute population

Question

I am trying to populate the src attribute for a html tag using a ngFor loop in my angular 2 web application. I ahve tried so many different ways, but I just can not get the image to appear on my web page. See my code below:-

HTML snippet:-

<tr *ngFor="let recipe of recipes">
        <td>
          <img src='{{recipe.Image_Path}}' width="100" height="100" />

        </td>
        <td>{{recipe.Recipe_Name}}</td>
        <td>{{recipe.Recipe_Description}}</td>
        <td>{{recipe.Category}}</td>
        <td>{{recipe.Difficulty_Descr}}</td>
        <td>{{recipe.Healthy}}</td>
        <td>{{recipe.Preparation_Time}}</td>
        <td>{{recipe.Vegetarian}}</td>
        <td>
          <a (click)="readOneRecipe(recipe.Recipe_Id)" class="btn btn-primary m-r-5px">
            <span class='glyphicon glyphicon-eye-open'></span> Read
          </a>
        </td>
        <td>
          <a (click)="updateRecipe(recipe.Recipe_Id)" class="btn btn-primary m-r-5px">
              <span class='glyphicon glyphicon-edit'></span> Edit
          </a>
        </td>
        <td>
          <a (click)="deleteRecipe(recipe.Recipe_Id)" class="btn btn-primary m-r-5px">
              <span class='glyphicon glyphicon-remove'></span> Delete
          </a>
        </td>
      </tr>

My Component.ts file :-

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { RecipeService } from '../recipe.service';
import { Recipe } from '../recipe';

@Component({
  selector: 'app-read-recipes',
  templateUrl: './read-recipes.component.html',
  styleUrls: ['./read-recipes.component.css'],
  providers: [RecipeService]
})
export class ReadRecipesComponent implements OnInit {

  @Output() show_create_recipe_event = new EventEmitter();
  @Output() show_read_one_recipe_event = new EventEmitter();
  @Output() show_update_recipe_event = new EventEmitter();
  @Output() show_delete_recipe_event = new EventEmitter();

  recipes: Recipe[];

  constructor(private _recipeService: RecipeService) { }

  creatRecipe():void {
    this.show_create_recipe_event.emit({ title: "Create Recipe" });
  }

  ngOnInit() {
    this._recipeService.readRecipes()
      .subscribe(recipes => this.recipes = recipes['records']);
      console.log(this.recipes);
  }

}

I know that the 'recipes' array in the *ngFor loop contains the correct file path to the images as I can see the content of the 'recipe' variable.

Below is a screen shot of my project folder structure:-

If I put my chrome web browser in development mode (F12) and click on the console tab then I see the following error:-

Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

the image path is incorrect because Angular Cli bundles your project in javascript files so the /app/images folder won't be there. What you have to do is to put your images folder in the assets folder and make sure the path will be something like this :

./assets/images/noimage.png