react-ronin/dist/components/image.client.d.ts

Access the RONIN data platform via React.

import React from "react";
import type { StoredObject } from "ronin/types";
export interface ImageProps {
    /**
     * Defines text that can replace the image in the page.
     */
    alt?: string;
    /**
     * The quality level at which the image should be displayed. A lower quality
     * ensures a faster loading speed, but might also effect the visual
     * appearance, so it is essential to choose carefully.
     *
     * Must be an integer between 0 and 100.
     *
     * @default 80
     */
    quality?: number;
    /**
     * The format of the image.
     *
     * @default "webp"
     */
    format?: "webp" | "jpeg" | "png" | "original";
    /**
     * The value of a RONIN Blob field.
     */
    src: string | StoredObject;
    /**
     * The intrinsic size of the image in pixels, if its width and height are the
     * same. Must be an integer without a unit.
     */
    size?: number;
    /**
     * The intrinsic width of the image in pixels. Must be an integer without a
     * unit.
     */
    width?: number;
    /**
     * The intrinsic height of the image, in pixels. Must be an integer without
     * a unit.
     */
    height?: number;
    /**
     * Specifies how the image should be resized to fit its container.
     *
     * @default "cover"
     */
    fit?: React.CSSProperties["objectFit"];
    /**
     * The aspect ratio of the image. Can be "square", "video", or a custom string.
     */
    aspect?: "square" | "video" | string;
    /**
     * Indicates how the browser should load the image.
     *
     * Providing the value "lazy" defers loading the image until it reaches a
     * calculated distance from the viewport, as defined by the browser. The
     * intent is to avoid the network and storage bandwidth needed to handle the
     * image until it's reasonably certain that it will be needed. This generally
     * improves the performance of the content in most typical use cases.
     */
    loading?: "lazy";
    /**
     * The class names for the image container (not the image itself).
     *
     */
    className?: string;
    /**
     * The inline style for the image container (not the image itself).
     */
    style?: React.CSSProperties;
}
declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>;
export default Image;