A comprehensive Contentful image loader for the Next.js Image component.
- Allows for native Contentful image params/options
- Similar error boundaries as
next/image
- Additional options for managing the aspect ratio of requested images
import Image from "next/image";
import { contentfulLoader } from "@delicious-simplicity/next-image-contentful-loader";
const Component = ({ image }) => {
return (
<>
<Image
loader={(props) => contentfulLoader(props, { fit: "crop", ar: "1:1" })}
src={image.url}
alt={image.title}
width={image.width}
height={image.height}
/>
</>
);
};