[英]Angular 2 - *ngFor <img> tag src attribute population
I am trying to populate the src attribute for a html tag using a ngFor loop in my angular 2 web application. 我正在尝试在我的angular 2 Web应用程序中使用ngFor循环填充html标签的src属性。 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:- 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>
My Component.ts file :- 我的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);
}
}
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. 我知道* ngFor循环中的'recipes'数组包含图像的正确文件路径,因为我可以看到'recipe'变量的内容。
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:- 如果我将chrome浏览器设置为开发模式(F12),然后点击控制台标签,则会看到以下错误:
Failed to load resource: the server responded with a status of 404 (Not Found) 加载资源失败:服务器响应状态为404(未找到)
the image path is incorrect because Angular Cli
bundles your project in javascript files so the /app/images
folder won't be there. 图像路径不正确,因为
Angular Cli
将您的项目捆绑在javascript文件中,因此/app/images
文件夹将不存在。 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 : 您需要做的就是将
images
文件夹放在assets
文件夹中,并确保路径如下所示:
./assets/images/noimage.png
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.