CODEWITHSUNDEEP
htmlangularangular2-templateangular-template
Char
Char

Reputation: 2133

Angular 2: Display image in div

How do you display image in div? In my case, it is from the database. 

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

The image's name is result.profile_picture. How do you add it in the html?

Upvotes: 1

Views: 4240

Answers (2)

Michele Sapignoli
Michele Sapignoli

Reputation: 597

To display your image directly into a div you can add a CSS property with NgStyle:

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

Upvotes: 3

Shailesh Ladumor
Shailesh Ladumor

Reputation: 7242

you can display image like this. does this help.

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

Upvotes: 1

Related Questions