https://github.com/delicious-simplicity/next-image-contentful-loader

A comprehensive Contentful image loader for the Next.js Image component
https://github.com/delicious-simplicity/next-image-contentful-loader

contentful contentful-api image nextjs

Last synced: 4 months ago
JSON representation

A comprehensive Contentful image loader for the Next.js Image component

• Host: GitHub
• URL: https://github.com/delicious-simplicity/next-image-contentful-loader
• Owner: delicious-simplicity
• License: mit
• Created: 2021-11-09T20:00:59.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-08-21T15:51:17.000Z (over 1 year ago)
• Last Synced: 2024-10-05T12:33:33.203Z (4 months ago)
• Topics: contentful, contentful-api, image, nextjs
• Language: TypeScript
• Homepage:
• Size: 158 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[made with 💜 by [DS]](https://www.delicious-simplicity.com/)

# @delicious-simplicity/next-image-contentful-loader

A comprehensive [Contentful](https://www.contentful.com/developers/docs/references/images-api) image loader for the [Next.js Image component](https://nextjs.org/docs/api-reference/next/image).

### Features

- Allows for native Contentful image params/options

- Similar error boundaries as `next/image`

- Additional options for managing the aspect ratio of requested images

### Usage

```tsx

import Image from "next/image";

import { contentfulLoader } from "@delicious-simplicity/next-image-contentful-loader";

const Component = ({ image }) => {

  return (

    <>

       contentfulLoader(props, { fit: "crop", ar: "1:1" })}

        src={image.url}

        alt={image.title}

        width={image.width}

        height={image.height}

      />

    >

  );

};

```

### Required packages

- [`next`](https://www.npmjs.com/package/next)