Get Image from APi

Question

I'm trying to implement this code for making API call for image without success:

 <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImage(product.productImage)"
        [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
    </div>

Component:

mainImage(productImage: number) {
    this.productService.getProductImage(productImage);
  }

Service:

getProductImage(imageId) {
    return this.http.get<any>(environment.apiKey + '/engine/product/files/' + imageId)
  }

When I use it this way:

<div class="col-xl-4 col-lg-6" *ngFor="let product of products">
      <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" image="http://123.123.122.1:8090/engine/product/files/{{product.productImage}}"
        [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
    </div>

It's working fine. Do you know where I'm wrong?

score 1 · Accepted Answer · answered Oct 13 '20 at 06:43

Your service function getProductImage is returning an Observable, therefore you'll need to add async pipe to your image @input param, like this:

<kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImage(product.productImage) | async"
    [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
</div>

Get Image from APi

1 Answers1