[英]Angular 2 - *ngFor <img> tag src attribute population
我正在尝试在我的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浏览器设置为开发模式(F12),然后点击控制台标签,则会看到以下错误:
加载资源失败:服务器响应状态为404(未找到)
图像路径不正确,因为Angular Cli
将您的项目捆绑在javascript文件中,因此/app/images
文件夹将不存在。 您需要做的就是将images
文件夹放在assets
文件夹中,并确保路径如下所示:
./assets/images/noimage.png
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.