The Vue Storefront Essentials Course is now available! Learn More
Image normalizer

Image normalizer

The normalizeImage function maps SAP Image into Unified SfImage.


NameTypeDefault valueDescription
imageImageSAP image
ctxImageContextNormalization context including an optional transformImageUrl which may transform the url


The SfImage is returned as a part of multiple models, as for example SfProduct, SfProductCatalogItem, and SfCart.

If you want to change the global attributes representation, you should override all root normalizers, so for example normalizeCart, normalizeProduct etc. Overriding the normalizeImage function will not change have an impact of the image normalization inside these functions, it is just an utils function which may be then used in writing other custom normalizers or methods.


import type { Image } from "@vsf-enterprise/sapcc-types";
import type { SfImage } from "@vue-storefront/unified-data-model";
import { maybe } from "@shared/utils";
import { NormalizerContext } from "@/normalizers/types";

export function normalizeImage(image: Image, ctx: NormalizerContext): SfImage {
  let url = image.url as string;
  if (ctx.transformImageUrl) {
    url = ctx.transformImageUrl(url);

  return {
    alt: maybe(image.altText),