Identification of issues

To be able to preview the site in the Docker container, the rendering host is configured as follows.

RENDERING_HOST=www.sxastarter.localhost

The images do not display correctly when accessing this site.

The way to fix this can be handled by modifying the Next.js settings and components, so we will check the procedure in this article.

Images of promo components.

Firstly, the red area at the bottom of the error screen above, the error is shown in the following form.

This error is caused by a restriction on the domains that the next/image component can refer to, and the error is being displayed because the cm running in Docker is not enabled. This can be worked around by adding the cm information to the remotePatterns pattern in the configuration file src\sxastarter\next.config.js.

    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'edge*.**',
        port: '',
      },
      {
        protocol: 'http',
        hostname: 'cm',
        port: '',
      },

Add the above settings, restart the container and access it to see the image.

Regarding the display of banner images

The next step is to check the situation where the image is not displayed on the top of the screen. Referring to the code, you will see that the image is specified in the following way.

The image is specified by path, but cm is the name under which it is launched in Docker and cannot be accessed from the browser at hand. So, change the path of the image to be displayed using next/image, as in the promo image above.

The component displaying the image returns a value in the Banner function, which is coded as follows.

  return (
    <div
      className={`component hero-banner ${props.params.styles} ${classHeroBannerEmpty}`}
      id={id ? id : undefined}
    >
      <div className="component-content sc-sxa-image-hero-banner" style={backgroundStyle}>
        {sitecoreContext.pageEditing ? <JssImage field={modifyImageProps} /> : ''}
      </div>
    </div>
  );

The image URL is written to be set against the backgroundStyle. The following is a check of what values are returned.

  console.log(props.fields.Image.value.src);

The results are as follows.

http://cm/-/media/Feature/JSS-Experience-Accelerator/Basic-Site/banner-image.jpg?h=2001&iar=0&w=3000&hash=84052E2380D35D4CC401BB468280AFAF

Therefore, the component is rewritten so that it is only displayed as a relative path if it starts with http://cm/. The modified code is as follows.

  // background image on cm
  const imageUrl = props?.fields?.Image?.value?.src;
  const formattedUrl = imageUrl?.startsWith('http://cm/')
    ? imageUrl.replace('http://cm/', '/')
    : imageUrl;

  const backgroundStyle = (props?.fields?.Image?.value?.src && {
    backgroundImage: `url('${formattedUrl}')`,
  }) as CSSProperties;

As a result, background images are now displayed.

Summary

This time, we have corrected the part of the output result of the image component that works fine in Vercel and other applications, but causes display errors in the local Docker environment. This configuration is effective only in the Docker environment, so it has no effect on sites deployed in Vercel.

Tags

• XM Cloud