You can also generate a solid color Data URL to match the image.
unoptimized
 unoptimized = {false} // {false} | {true}
When true, the source image will be served as-is instead of changing quality,
size, or format. Defaults to false.
 import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}
Since Next.js 12.3.0, this prop can be assigned to all images by updating next.config.js with the following configuration:
next.config.js module.exports = {
  images: {
    unoptimized: true,
  },
}
Other Props
Other properties on the <Image /> component will be passed to the underlying
img element with the exception of the following:
srcSet. Use Device Sizes instead.
decoding. It is always "async".
Configuration Options