NextImage loader doesn't correctly set the width and height params

[mg-aceik]

Describe the Bug

NextImage loader doesn't correctly set the width and height params on the url depending on the fill value. This results in Sitecore image processor to add black borders to the image depending on its size.

It returns srcset with values like /-/jssmedia/test.jpg?h=1705&iar=0&w=2740&rev=7a67deeaa84446e69d7bbafbe2d4baf4&mw=640

To Reproduce

<NextImage
  field={props.fields.image}
  fill 
  sizes="100vw" />

Expected Behavior

srcset with values like /-/jssmedia/test.jpg?iar=0&rev=7a67deeaa84446e69d7bbafbe2d4baf4&mw=640 In other words, strip out the height and width params.

Possible Fix

Update the sitecoreLoader to remove these params if the fill param is passed, similar to how it is done on the props themselves.

Provide environment information

• Sitecore Version: XM Cloud
• JSS Version: 21.5.0

[Juansereina]

I'm experiencing the same issue. I've written a custom loader to remove the h and w properties, and I use it in the image component when I add the fill attribute.

// src/lib/sitecore-loader-override

import { ImageLoader, ImageLoaderProps } from 'next/image';

export const sitecoreLoader: ImageLoader = ({
  src,
  width,
}: ImageLoaderProps): string => {
  const [root, paramString] = src.split('?');
  const params = new URLSearchParams(paramString);
  params.set('mw', width.toString());

  // custom change
  params.delete('h');
  params.delete('w');

  return `${root}?${params}`;
};

import { sitecoreLoader } from 'lib/sitecore-loader-override';

<NextImage
  field={props.fields.image}
  fill
  loader={sitecoreLoader}
/>

[illiakovalenko]

@mg-aceik Thank you for submitting your contribution! I've added a ticket containing all the details. It has been added to our internal backlog for thorough review