How to generate image tag based on API response in Angular4

Question

I am working in an Angular4 application ,In this I want show the images based on the API response as follows

In my application when the user clicked on a product that product name is passed to the API and API will return the images related to the product.

In the product details page I am showing the product like user hover on the small images it will display the big size images .

What I want to do is If the API returns image path for 3 images means I want to show only three images(image tag).If API returns 5 paths then I want to display 5 images .This process is dynamic based on the API response count of images.

Now I have 5 static image tag where I passed the API response it shows the images ,If API returns 4 image paths it shows 4 images and 1 alt tag.

I want to make it dynamic process...

Anuradha Gunasekara · Accepted Answer · 2018-04-04 12:23:48Z

0

You can display the images using a *ngFor directive. Then you can display images dynamically regardless the number of images you get from the service.

<div class="row" *ngIf="smallImages">
     <ng-container *ngFor="let image of images">
       <img (mouseenter)="mouseEnter($event)"  [src]="image.src" 
        class="img-thumbnail">
     </ng-container>
</div>

answered Apr 4, 2018 at 12:23

Anuradha Gunasekara

7,0132 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anuradha Gunasekara Over a year ago

You can iterate in your images array using *ngFor and render your images as shown in the above example. What do you want to know more?

Nikson Over a year ago

I am looking for your help to solve this issue stackoverflow.com/questions/50055503/…

Nikson Over a year ago

Please take a look at the above link I have given. @Anuradha Gunasekara

Collectives™ on Stack Overflow

How to generate image tag based on API response in Angular4

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related