从 APi 获取图像

Question

我正在尝试实现此代码以 API 调用图像但没有成功：

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

组件：

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

服务：

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

当我这样使用它时：

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

一切正常。你知道我哪里错了吗？

Answer 1

您的服务函数 getProductImage 正在返回一个 Observable，因此您需要将 async pipe 添加到您的 image @input 参数，如下所示：

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

从 APi 获取图像

Get Image from APi

typescript

angular

angular10