无法在 Spartacus 中渲染图像

Question

产品图像未在自定义 Spartacus 组件中呈现。以下是 HTML 代码的代码片段。
我已经检查了使用图像容器并加载图像的 cx-media。但是我无法弄清楚我的自定义 Spartacus 店面中缺少什么。

也没有从 spartacus 触发获取图像的请求。但同样的情况也发生在 PDP 上。我正在使用 OOTB cx-media。这个内部不会调用吗？

<ng-container *ngIf="model$ | async as model">
<cx-product-list-item
  *ngFor="let product of model?.products"
  [product]="product"
  class="cx-product-search-list"
></cx-product-list-item>
</ng-container>

来自后端的响应

{
   "products" : [ {
      "averageRating" : 4.411764705882353,
      "baseOptions" : [ ],
      "code" : "358639",
      "configurable" : false,
      "images" : [ {
         "altText" : "DSC-N1",
         "format" : "zoom",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjE4MXxpbWFnZS9qcGVnfGltYWdlcy9oYjYvaDUzLzg3OTcyNjU0NjEyNzguanBnfGI2ZTBiOTI4ZTZlNWEwMWRiYzMwM2YzZTg3ODE5OTQ1ZDdmY2VkZGNiMTBlNjkyZmJmZDExYzIyOTNhZTBhNWM"
      }, {
         "altText" : "DSC-N1",
         "format" : "product",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMjA3OHxpbWFnZS9qcGVnfGltYWdlcy9oODkvaGQxLzg3OTcyOTE3NDEyMTQuanBnfDE2NDc5MDE3MzNiMzIzYmYwOGRkN2YwZjg0MzVhMzRlNTM0ZTIyMWU3N2I4NmM3Mjg0NzUyODUzNTRjODkwZTg"
      }, {
         "altText" : "DSC-N1",
         "format" : "thumbnail",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNDAxfGltYWdlL2pwZWd8aW1hZ2VzL2hlMi9oMzYvODc5NzMxODA4NjY4Ni5qcGd8YTIyNzcxNDBhMWQ3NGU0OWM5NDI0NGE1NGFmNGEzMDk1MjBhNTQ3NGRmMjVmMDBjNjFiN2RmZTY1NDhhMzFkNg"
      }, {
         "altText" : "DSC-N1",
         "format" : "cartIcon",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxNDYyfGltYWdlL2pwZWd8aW1hZ2VzL2g0Yi9oMzIvODc5NzM0NDQzMjE1OC5qcGd8YTNkMGQ5MjBjOGQwNDJmNDNjZDE1NmI1ZjRjODYwOWZjNjkzOGZlZTNlODIyNjEzZjlkNmY0YzRhNDI2NjljNQ"
      } ],
      "manufacturer" : "Sony",
      "name" : "DSC-N1",
      "nameHtml" : "DSC-N1",
      "purchasable" : true,
      "summary" : "The Cyber-shot N1 offers 8.1 effective Megapixels with high sensitivity for reduced blur, a massive 3.0\"\" Clear Photo LCD Plus screen with touch-screen operation and a ZEISS 3x Optical Zoom.",
      "url" : "/Open-Catalogue/Cameras/Digital-Cameras/Digital-Compacts/DSC-N1/p/358639"
   }, {
      "averageRating" : 4.6,
      "baseOptions" : [ ],
      "code" : "479956",
      "configurable" : false,
      "images" : [ {
         "altText" : "4GB Memory Stick Pro Duo + adapter",
         "format" : "zoom",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNTQ4M3xpbWFnZS9qcGVnfGltYWdlcy9oYmQvaDY5Lzg3OTcyNjc3NTUwMzguanBnfDVmMmY3ZTI5ZDI5ZDAxNjUxZmQxMjNkYWNhM2MzYjE3MDc3YTJmNmViOTI1M2IwOWQxYWExOTQwODA5NWU2YWQ"
      }, {
         "altText" : "4GB Memory Stick Pro Duo + adapter",
         "format" : "product",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMDkwMHxpbWFnZS9qcGVnfGltYWdlcy9oNjEvaDcwLzg3OTcyOTQwMzQ5NzQuanBnfDk1MTBkMjU5YmRlZjNiNzIzM2IwZGYyZTdiYjZhNDVkOGQzNTdjODk1NDc0NmIxZDI4OWIwZTlhMDExMDUwYjQ"
      }, {
         "altText" : "4GB Memory Stick Pro Duo + adapter",
         "format" : "thumbnail",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyMDQwfGltYWdlL2pwZWd8aW1hZ2VzL2gyMC9oODQvODc5NzMyMDM4MDQ0Ni5qcGd8OWRiOTk2YzY5MmUyOWNhNGIwM2ViNTI0YjBkMzBhMzllNDFkOWI0MWNiZmY3MDE1M2E3YjZkM2MzZmU2MzdjMA"
      }, {
         "altText" : "4GB Memory Stick Pro Duo + adapter",
         "format" : "cartIcon",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMzQ3fGltYWdlL2pwZWd8aW1hZ2VzL2g3YS9oNjIvODc5NzM0NjcyNTkxOC5qcGd8YjczMDkxYzM0ZmY1NTc4MjEzOWU4Yzk3NGVlOWI5MjAxMTE4NTY1ZTBlNGIwY2UyNjRkZDhiNGE3ZmZkMWM0OA"
      } ],
      "manufacturer" : "Sony",
      "name" : "4GB Memory Stick Pro Duo + adapter",
      "nameHtml" : "4GB Memory Stick Pro Duo + adapter",
      "purchasable" : true,
      "summary" : "MSX-M4GSX - 4GB Memory Stick Pro Duo + adapter",
      "url" : "/Open-Catalogue/Data-storage/Flash-Memory/4GB-Memory-Stick-Pro-Duo-%2B-adapter/p/479956"
   }, {
      "averageRating" : 5.0,
      "baseOptions" : [ ],
      "code" : "1377492",
      "configurable" : false,
      "images" : [ {
         "altText" : "Micro Webcam",
         "format" : "zoom",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMzI2N3xpbWFnZS9qcGVnfGltYWdlcy9oMDQvaGEzLzg3OTcyNTAxOTEzOTAuanBnfDFhNTIzZWY5M2E3NjMzZWQ5NGM4OGRlMDM0OGFjOGRmNDJiODVjMmJkM2YxMjZhZWI0NDkyMWFiZDMxOGJmOTA"
      }, {
         "altText" : "Micro Webcam",
         "format" : "product",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wzMDk0NXxpbWFnZS9qcGVnfGltYWdlcy9oNWUvaDgxLzg3OTcyNzY1MzY4NjIuanBnfGM5M2ViZmQ2MmE4NjYwY2NlY2VjYzNhYmE1OGFhY2QxNThmMjE4YmMxYWRiMmU4ZDBhNzk2MjlmZDYyMzBiOGE"
      }, {
         "altText" : "Micro Webcam",
         "format" : "thumbnail",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxNzgzfGltYWdlL2pwZWd8aW1hZ2VzL2g0OS9oNTUvODc5NzMwMjgxNjc5OC5qcGd8NjQ2MmM2MDgxZmUyNzU0YjJkMTY3NDM3MDJkNmFiYzQ4MzljMWFhN2QwMTVhYjliZjU0ZGMxNWZjNWViYjgzNg"
      }, {
         "altText" : "Micro Webcam",
         "format" : "cartIcon",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMjMyfGltYWdlL2pwZWd8aW1hZ2VzL2g4My9oNTAvODc5NzMyOTE2MjI3MC5qcGd8MWMyZGY2Mzk4NGQ2ZjA5NGM3NWQ1ZDcwNjczNjRmMDYzZDY1YWUxZTY4ZTY3YTZjMDU3ZGIyNzMzMGFkM2RiNQ"
      } ],
      "manufacturer" : "Targus",
      "name" : "Micro Webcam",
      "nameHtml" : "Micro Webcam",
      "purchasable" : true,
      "url" : "/Open-Catalogue/Cameras/Webcams/Micro-Webcam/p/1377492"
   }, {
      "averageRating" : 2.607142857142857,
      "baseOptions" : [ ],
      "code" : "1986316",
      "configurable" : false,
      "images" : [ {
         "altText" : "LEGRIA HF S100",
         "format" : "zoom",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjU1MnxpbWFnZS9qcGVnfGltYWdlcy9oZDMvaGY5Lzg3OTcyNTU4Mjc0ODYuanBnfDZjMzRhZjBlN2JlMWZlM2UyZDJiNmM4OTRkODc0NTI3Y2QyNWZiOTgxZjFkMTkwMDc3YmJhNTQ4MDliM2M2NmU"
      }, {
         "altText" : "LEGRIA HF S100",
         "format" : "product",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3w1OTg4NHxpbWFnZS9qcGVnfGltYWdlcy9oNzcvaDExLzg3OTcyODIxNzI5NTguanBnfDc0YmI4N2I2ZGRmMDYxMzYyZWU0MjJjM2UzYmU0ZTZkZmM3MDU0YjZlNTYxYmNkYjk5OGNjYzljNDY3MTcyMGE"
      }, {
         "altText" : "LEGRIA HF S100",
         "format" : "thumbnail",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyMjMxfGltYWdlL2pwZWd8aW1hZ2VzL2hkNC9oODUvODc5NzMwODQ1Mjg5NC5qcGd8OWQyY2U0MTI5ODBhMzU4MmM4ZDE0NWQ2OGVhMzMwY2IzZDZlYjY5Mjc5NDM1YjVlY2FlOWIzNTQ4NDIzNjVmOQ"
      }, {
         "altText" : "LEGRIA HF S100",
         "format" : "cartIcon",
         "imageType" : "PRIMARY",
         "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxNDE2fGltYWdlL2pwZWd8aW1hZ2VzL2g5Ny9oMjAvODc5NzMzNDc5ODM2Ni5qcGd8OGI5YzQ0MzIzMDA1MGI4YzlmYTgwMzZkMmJlMGQ5M2M0YWExOTQ5OTViOGM1ZTVmNWIzZTFkMmFiNDdkNTFmZA"
      } ],
      "manufacturer" : "Canon",
      "name" : "LEGRIA HF S100",
      "nameHtml" : "LEGRIA HF S100",
      "purchasable" : true,
      "summary" : "LEGRIA HF S100 - SD/SDHC, 1/2.6\"\" CMOS, 8.59 megapixel, 6.4 - 64mm, 10x Optical, DIGIC DV III, 2.7\"\" LCD, 0.3 lux, 1/6 - 1/2000th sec., USB/HDMI",
      "url" : "/Open-Catalogue/Cameras/Hand-held-Camcorders/LEGRIA-HF-S100/p/1986316"
   } ]
}

下面是模块

   import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BuyAgainComponent } from './buyAgain.component';
import { CmsConfig, provideDefaultConfig } from '@spartacus/core';
import { MediaModule, ProductListModule } from '@spartacus/storefront';

@NgModule({
  imports: [CommonModule,
    ProductListModule,
  MediaModule],
  providers: [
    provideDefaultConfig(<CmsConfig>{
      cmsComponents: {
        BuyAgainComponent: {
          component: BuyAgainComponent,
        },
      },
    }),
  ],
  declarations: [BuyAgainComponent],
  exports: [BuyAgainComponent],
})
export class BuyAgainModule {}

下面是配置模块

@NgModule({
  declarations: [],
  imports: [
    LayoutConfigurationModule,
    ExtendServices,
    BuyAgainModule,
    HttpClientModule,
    BaseOccModule
  ],
  providers: [provideConfig(mediaConfig), ...defaultCmsContentProviders, provideConfig(<OccConfig>{
    backend: {
      occ: {
        baseUrl: 'https://localhost:9002/',
      }
    },

这是 Inspect Element 工具的屏幕截图

Element tool screenshot

结果：

Product Image Not rendering

Answer 1

我觉得回复很简单

TL;DR : 获取数据后立即应用 normalizer pipe:

constructor(private converterService: ConverterService) // inject the service
...

.pipe(this.converterService.pipeable(PRODUCT_NORMALIZER)) // pipe the received products

说明：Spartacus 通常需要对来自 BE 的数据进行归一化处理；特别是，对于产品，它规范化了产品数据和图像；里面product-image-normalizer.ts，可以看出它是如何按 imageType 和 format 对图像进行分组。您正在使用的 ProductListItemComponent 组件 (cx-product-list-item) 是这样实现的：

  <cx-media
    class="cx-product-image"
    [container]="product.images?.PRIMARY"
    format="product"
    [alt]="product.summary"
  ></cx-media>

您可能会注意到，对于尚未规范化的数据，product.images?.PRIMARY 将提供一个 null container 输入参数的值，防止图像显示：

  protected create(): void {
    this.media = this.mediaService.getMedia(
      this.container,
      this.format,
      this.alt,
      this.role
    );
    if (!this.media?.src) {
      this.handleMissing();
    }
  }

因此，一旦添加了用于标准化产品的代码，我很确定它会起作用。请让我知道干杯！

无法在 Spartacus 中渲染图像

Not Able to Render Image in Spartacus

angular

spartacus-storefront

sap-commerce-cloud