next-contentful-picture
A simple Contentful image implementation for your NextJS applications utilizing <picture> elements to support the various image-formats.
The contentful API still does not support automatic responses for image-types.
Features
- uses <source> elements to display avif, wepb and png sources
- allows for native contentful image params/options
- allows for different aspect-ratios on different breakpoints (TODO*)
- uses @react-waypoint to defer loading images
- can give images priority for prefetching in <head>
- added support for nextJS app directory, set the flag useAppDir to true
Installation
#npm
npm install -S px-do/next-contentful-picture
#yarn
yarn add px-do/next-contentful-picture
#pnpm
pnpm i -S px-do/next-contentful-picture
Usage
Minimal Implementation:
import {ContentfulFigure} from './ContentfulFigure';
import {FunctionComponent} from 'react';
import {Asset} from 'contentful';
const Foo: FunctionComponent<{ asset: Asset }> = ({ asset }) => {
return <ContentfulFigure image={asset} />
}