gatsby-plugin-sanity-image/index.d.ts

Gatsby plugin providing easy responsive behavior for Sanity-hosted images

export const SANITY_REF_PATTERN: RegExp;
export const DEFAULT_IMAGE_CONFIG: any;
export const builder: import("@sanity/image-url/lib/types/builder").ImageUrlBuilder;
export default SanityImage;
export function parseImageRef(id: any): {
    assetId: string;
    dimensions: {
        width: number;
        height: number;
    };
    format: string;
};
export function imageUrl(asset: any, params?: {}): any;
export type SanityImageOptions = {
    /**
     * If set, `width` and `height` attributes are computed and set on the image based on the aspect ratio. Depending on the configuration used, these dimensions might not match the final image.
     */
    __experimentalAspectRatio: boolean;
};
/**
 * @typedef {object} SanityImageOptions
 * @prop {boolean} __experimentalAspectRatio If set, `width` and `height` attributes are computed and set on the image based on the aspect ratio. Depending on the configuration used, these dimensions might not match the final image.
 */
/**
 * Builds an <img> tag with the relevant properties from Sanity image data.
 *
 * @param {object} props
 * @param {object} props.asset Object with either an `_id` or a `_ref` property representing the Sanity.io image `_id` and optionally metadata with a base-64 encoded preview image.
 * @param {object} [props.hotspot] Image hotspot (focal point) data from Sanity
 * @param {object} [props.crop] Image crop data from Sanity
 * @param {object} [props.config] Optional configuration overrides passed to the Sanity image url builder
 * @param {number} props.width Anticipated presentation width of the image. This is included in the parameters in the image url, and is used in determining the dimensions for the srcset entries
 * @param {number} [props.height] Desired presentation height of the image. THis is included in the parameters in the image url, and used in determining the aspect ratio in some cases.
 * @param {import("react").HTMLAttributes['className']} [props.className] HTML Attribute passed through to the <img> tag
 * @param {import("react").ImgHTMLAttributes['width']} [props.htmlWidth] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['height']} [props.htmlHeight] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['alt']} [props.alt] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['sizes']} [props.sizes] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['crossOrigin']} [props.crossOrigin] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['decoding']} [props.decoding] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['loading']} [props.loading] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['referrerPolicy']} [props.referrerPolicy] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['role']} [props.role] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['srcSet']} [props.srcSet] HTML Attribute passed through to the <img> tag without any changes
 * @param {import("react").ImgHTMLAttributes['useMap']} [props.useMap] HTML Attribute passed through to the <img> tag without any changes
 * @param {*} [props.__typename] Ignored property for improved ergonomics
 * @param {*} [props._type] Ignored property for improved ergonomics
 * @param {*} [props._key] Ignored property for improved ergonomics
 * @param {*} [props.sources] Reserved (but ignored) property. May be used in the future.
 * @param {SanityImageOptions} [props.options]
 */
declare function SanityImage({ asset, hotspot, crop, width, height, options, config, __typename, _type, _key, sources, ...props }: {
    asset: object;
    hotspot?: object;
    crop?: object;
    config?: object;
    width: number;
    height?: number;
    className?: import("react").HTMLAttributes<any>['className'];
    htmlWidth?: import("react").ImgHTMLAttributes<any>['width'];
    htmlHeight?: import("react").ImgHTMLAttributes<any>['height'];
    alt?: import("react").ImgHTMLAttributes<any>['alt'];
    sizes?: import("react").ImgHTMLAttributes<any>['sizes'];
    crossOrigin?: import("react").ImgHTMLAttributes<any>['crossOrigin'];
    decoding?: import("react").ImgHTMLAttributes<any>['decoding'];
    loading?: import("react").ImgHTMLAttributes<any>['loading'];
    referrerPolicy?: import("react").ImgHTMLAttributes<any>['referrerPolicy'];
    role?: import("react").ImgHTMLAttributes<any>['role'];
    srcSet?: import("react").ImgHTMLAttributes<any>['srcSet'];
    useMap?: import("react").ImgHTMLAttributes<any>['useMap'];
    __typename?: any;
    _type?: any;
    _key?: any;
    sources?: any;
    options?: SanityImageOptions;
}): JSX.Element;
declare namespace SanityImage {
    namespace propTypes {
        const config: PropTypes.Requireable<object>;
        const options: PropTypes.Requireable<PropTypes.InferProps<{
            __experimentalAspectRatio: PropTypes.Requireable<boolean>;
        }>>;
        const hotspot: PropTypes.Requireable<PropTypes.InferProps<{
            height: PropTypes.Requireable<number>;
            width: PropTypes.Requireable<number>;
            x: PropTypes.Requireable<number>;
            y: PropTypes.Requireable<number>;
        }>>;
        const crop: PropTypes.Requireable<PropTypes.InferProps<{
            bottom: PropTypes.Requireable<number>;
            left: PropTypes.Requireable<number>;
            right: PropTypes.Requireable<number>;
            top: PropTypes.Requireable<number>;
        }>>;
        const asset: PropTypes.Validator<PropTypes.InferProps<{
            _id: PropTypes.Validator<string>;
            metadata: PropTypes.Requireable<PropTypes.InferProps<{
                preview: PropTypes.Requireable<string>;
                lqip: PropTypes.Requireable<string>;
            }>>;
        }> | PropTypes.InferProps<{
            _ref: PropTypes.Validator<string>;
            metadata: PropTypes.Requireable<PropTypes.InferProps<{
                preview: PropTypes.Requireable<string>;
                lqip: PropTypes.Requireable<string>;
            }>>;
        }>>;
        const width: PropTypes.Requireable<number>;
        const height: PropTypes.Requireable<number>;
        const htmlWidth: PropTypes.Requireable<number>;
        const htmlHeight: PropTypes.Requireable<number>;
        const crossOrigin: PropTypes.Requireable<string>;
        const decoding: PropTypes.Requireable<string>;
        const loading: PropTypes.Requireable<string>;
        const referrerPolicy: PropTypes.Requireable<string>;
        const role: PropTypes.Requireable<string>;
        const srcSet: PropTypes.Requireable<string>;
        const useMap: PropTypes.Requireable<string>;
        const alt: PropTypes.Validator<string>;
        const className: PropTypes.Requireable<string>;
        const sizes: PropTypes.Requireable<string>;
        const __typename: PropTypes.Requireable<any>;
        const _type: PropTypes.Requireable<any>;
        const _key: PropTypes.Requireable<any>;
        const sources: PropTypes.Requireable<any>;
    }
}
import PropTypes from "prop-types";