@prismicio/next/dist/PrismicNextImage.d.ts

Helpers to integrate Prismic into Next.js apps

import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
import { ImageProps } from "next/image";
import { ImgixURLParams } from "imgix-url-builder";
import { ImageFieldImage } from "@prismicio/client";
export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "loader"> & {
    /** The Prismic Image field or thumbnail to render. */
    field: ImageFieldImage | null | undefined;
    /**
     * An object of Imgix URL API parameters to transform the image.
     *
     * @see https://docs.imgix.com/apis/rendering
     */
    imgixParams?: {
        [P in keyof ImgixURLParams]: ImgixURLParams[P] | null;
    };
    /**
     * Declare an image as decorative by providing `alt=""`.
     *
     * See:
     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
     */
    alt?: "";
    /**
     * Declare an image as decorative only if the Image field does not have
     * alternative text by providing `fallbackAlt=""`.
     *
     * See:
     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
     */
    fallbackAlt?: "";
    /**
     * Rendered when the field is empty. If a fallback is not given, `null` will
     * be rendered.
     */
    fallback?: React.ReactNode;
    loader?: ImageProps["loader"] | null;
};
/**
 * React component that renders an image from a Prismic Image field or one of
 * its thumbnails using `next/image`. It will automatically set the `alt`
 * attribute using the Image field's `alt` property.
 *
 * It uses an Imgix URL-based loader by default. A custom loader can be provided
 * with the `loader` prop. If you would like to use the Next.js Image
 * Optimization API instead, set `loader={undefined}`.
 *
 * @param props - Props for the component.
 *
 * @returns A responsive image component using `next/image` for the given Image
 *   field.
 *
 * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
 */
export declare const PrismicNextImage: ForwardRefExoticComponent<PropsWithoutRef<PrismicNextImageProps> & RefAttributes<HTMLImageElement>>;