Question

我正在尝试使用我的angular 2 Web应用程序中的ngFor循环填充html标记的src属性。我尝试了很多不同的方法，但我无法将图像显示在我的网页上。请参阅下面的代码： -

HTML片段： -

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

我的Component.ts文件： -

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);
  }

}

我知道* ngFor循环中的'recipes'数组包含图像的正确文件路径，因为我可以看到'recipe'变量的内容。

下面是我的项目文件夹结构的屏幕截图： -

如果我将chrome web浏览器置于开发模式（F12）并单击控制台选项卡，则会看到以下错误： -

无法加载资源：服务器响应状态为404（未找到）

Answer 1

图片路径不正确，因为Angular Cli将您的项目捆绑在javascript文件中，因此/app/images文件夹不会存在。你要做的是把你的images文件夹放在assets文件夹中，并确保路径是这样的：

./assets/images/noimage.png

Angular 2 - * ngFor <img/>标记src属性填充

1 个答案: