Vue Storefront is now Alokai! Learn More
Image normalizer

Image normalizer

The normalizeImage function maps SAP Image into Unified SfImage.


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


The SfImage is returned as a part of multiple models, as for example SfProduct, SfProductCatalogItem, and SfCart. If the SfImage structure doesn't contain the information you need for your Storefront, you can extend its logic using the addCustomFields API.

export const unifiedApiExtension = createUnifiedExtension({
  normalizers: {
    addCustomFields: [
        normalizeImage: (context, image) => ({
          format: image.format,
  config: {


import { maybe } from "@shared/utils";
import { defineNormalizer } from "../defineNormalizer";

export const normalizeImage = defineNormalizer.normalizeImage((context, image) => {
  let url = image.url as string;
  if (context.transformImageUrl) {
    url = context.transformImageUrl(url);

  return {
    alt: maybe(image.altText),