Angular 2：在div中显示图像

Question

如何在 div 中显示图像？就我而言，它来自数据库。

<div *ngFor="let result of results" class="search-res" (click)="showEmployee(result._id)">
     <div><img class=""/> {{ result.name }} </div> 
</div>

图像的名称是 result.profile_picture。如何在 html 中添加它？

Answer 1

你可以这样显示图像。这有帮助吗？

<div *ngFor="let result of results" class="search-res" (click)="showEmployee(result._id)">
     <div><img src="{{result.profile_picture}}"> {{ result.name }} </div> 
</div>

Answer 2

要将图像直接显示到 div 中，您可以使用 NgStyle 添加 CSS 属性：

<div *ngFor="let result of results" class="search-res" (click)="showEmployee(result._id)">
   <div [ngStyle]="{ 'background-image': 'url(' + result.image_path+ ')'}">> {{ result.name }} </div> 
</div>

Angular 2：在div中显示图像

Angular 2: Display image in div

html

angular-template

angular2-template

angular