0

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:-

enter image description here

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)

ED209
  • 588
  • 1
  • 9
  • 26
  • did you try with `` ? – Mohamed Ali RACHID Nov 24 '17 at 22:51
  • 1
    Have you included you img folder as asset in .angular-cli.json file? – Z. Bagley Nov 24 '17 at 22:52
  • Hi Mohammed Ali. Yes I did. This did not work. :-( – ED209 Nov 24 '17 at 22:53
  • are you sure that your `Image_path` is correct ? did you check the source code in the browser ..? – Mohamed Ali RACHID Nov 24 '17 at 22:55
  • Hi Z Bagley. No I havent should I put the path to the image folder under the "assets" section of the angular-CLI.json file? – ED209 Nov 24 '17 at 22:56
  • 1
    Images should usually be placed in an asset folder and not inside the app folder. Although the images are found in your project structure, it may be possible that angular does not ship those files to the frontend and so the link does not work. Try to copy them to assets/img. You probably have to change the image path for all elements then too – Benedikt Schmidt Nov 24 '17 at 22:57
  • if you fix the snippet for the src to: `` or `` it means that the path is not correct – DrNio Nov 24 '17 at 23:00
  • Have you tried this? https://stackoverflow.com/questions/40797925/how-to-bind-img-src-in-angular-2-in-ngfor – Luis Cabrera Benito Nov 24 '17 at 23:04
  • Hi Benedikt. I created a new folder under Assets called 'images' and copied all my images into that folder. Then I changed the path for the src to this for example - ./assets/images/rustic-vegetable-soup.jpg. but I am getting this error in the console window of the browser - GET http://localhost:4200/assets/images/beetroot-onion-seed-soup.jpg 404 (Not Found) – ED209 Nov 24 '17 at 23:07

1 Answers1

2

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
El houcine bougarfaoui
  • 35,805
  • 9
  • 37
  • 37