@prismicio/react/dist/PrismicImage.d.ts

React components and hooks to fetch and present Prismic content

import { type ComponentProps, FC, ReactNode } from "react";
import { type ImageFieldImage, asImagePixelDensitySrcSet, asImageWidthSrcSet } from "@prismicio/client";
type ImgixURLParams = Omit<NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>, "widths"> & Omit<NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>, "pixelDensities">;
/** Props for `<PrismicImage>`. */
export type PrismicImageProps = Omit<ComponentProps<"img">, "src" | "srcset" | "alt"> & {
    /** 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?: "";
    /**
     * The value to be rendered when the field is empty. If a fallback is not
     * given, `null` will be rendered.
     */
    fallback?: ReactNode;
} & ({
    /**
     * Widths used to build a `srcset` value for the Image field.
     *
     * If a `widths` prop is not given or `"defaults"` is passed, the
     * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
     * 3840.
     *
     * If the Image field contains responsive views, each responsive view
     * can be used as a width in the resulting `srcset` by passing
     * `"thumbnails"` as the `widths` prop.
     */
    widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "defaults";
    /** Not used when the `widths` prop is used. */
    pixelDensities?: never;
} | {
    /** Not used when the `widths` prop is used. */
    widths?: never;
    /**
     * Pixel densities used to build a `srcset` value for the Image field.
     *
     * If a `pixelDensities` prop is passed `"defaults"`, the following
     * pixel densities will be used: 1, 2, 3.
     */
    pixelDensities: NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
});
/**
 * React component that renders an image from a Prismic Image field or one of
 * its thumbnails. It will automatically set the `alt` attribute using the Image
 * field's `alt` property.
 *
 * By default, a widths-based srcset will be used to support responsive images.
 * This ensures only the smallest image needed for a browser is downloaded.
 *
 * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default
 * pixel densities can be used by using `pixelDensities="defaults"`.
 *
 * **Note**: If you are using a framework that has a native image component,
 * such as Next.js and Gatsby, prefer using those image components instead. They
 * can provide deeper framework integration than `<PrismicImage>`.
 *
 * @param props - Props for the component.
 *
 * @returns A responsive image component for the given Image field.
 */
export declare const PrismicImage: FC<PrismicImageProps>;
export {};