Assets which are shared between apps and/or platforms belong in the shared workspace.

Images

Loading images is done using our custom Image component. This meshes Material UIs theme styling and the NextJS image component and image optimisation system.

import { Image } from "components"

<Image
  width={400}
  height={300}
  src="cat"
  alt="a cat"
  sx={{
    objectFit: "cover"
  }}
/>

We use a custom loader to connect the NextJS Image Optimization system to our asset management system.

In the above example the src property matches the slug in the asset management system. Using our custom loader the src and the NEXT_PUBLIC_ASSET_MANAGER environment variable are combined to request the image. A summary of the loader code is as follows:

return `${process.env.NEXT_PUBLIC_ASSET_MANAGER}/${src}?resize_to_fit=${width},0&quality=${quality || 75}`

Known issues

Unfortunately these 2 systems do not mesh perfectly, leading to some known issues.

The height property is not passed to the asset management system

The NextJS Image component does not pass the height prop down to the image loader, just the width. Note in the loader example above the height is set to zero. This leads to the image being resized using the passed width only - the height being determined by the images aspect ratio. Unfortunately this restriction means that cropping an image via the asset management system is currently not possible. Passing the height to the Image component is still mandatory to prevent layout shift

The fill property is unavailable

As the asset management system always requires a width to be passed we can’t use the fill property.