@posit-dev/shinyreact
    Preparing search index...

    Function ImageOutput

    • A React component for displaying Shiny image outputs with dynamic sizing capabilities.

      Unlike typical web images that have an inherent size, this component tells the server to generate an image that is sized to fit the dimensions of the element which is rendered by the component. This means that the element must have a width and height, either through CSS or through the width and height props.

      For vertical stretching, you can use height: "100%" inside a flex container, or use viewport units like "100vh" for full height

      Parameters

      • props: {
            className?: string;
            debounceMs?: number;
            height?: string;
            id: string;
            namespace?: string | null;
            onRecalculating?: (isRecalculating: boolean) => void;
            width?: string;
        }

        The component props

        • OptionalclassName?: string

          Optional CSS class name to apply to the img element

        • OptionaldebounceMs?: number

          Optional debounce delay in milliseconds for dimension change detection (default: 400ms). Controls how long to wait after a resize event before sending updated dimensions to Shiny. Higher values reduce server load but may delay updates.

        • Optionalheight?: string

          Optional height as a CSS size string (e.g., "200px", "50vh", "auto"). If provided, sets the height attribute on the img tag. If not provided, the height should be controlled via CSS applied to this element.

        • id: string

          The Shiny output ID that corresponds to a renderImage() call on the server

        • Optionalnamespace?: string | null

          Optional namespace override for Shiny module support. If provided, overrides the namespace from ShinyModuleProvider context. Pass null to explicitly disable namespacing even when inside a provider.

        • OptionalonRecalculating?: (isRecalculating: boolean) => void

          Optional callback function that gets called whenever the recalculation status changes. Receives a boolean indicating whether the image is currently recalculating.

        • Optionalwidth?: string

          Optional width as a CSS size string (e.g., "300px", "50%", "auto"). If provided, sets the width attribute on the img tag. If not provided, the width should be controlled via CSS applied to this element.

      Returns Element | null

      The component automatically:

      • Tracks the rendered dimensions of the image and sends them to Shiny via clientData
      • Updates Shiny when the image size changes (using ResizeObserver with debouncing)
      • Hides the image when Shiny sets the hidden state
      • Handles image load events to ensure accurate dimension reporting

      The server-side renderImage() function receives the client dimensions and can use them to generate appropriately sized images.

      Note that if you use two ImageOutputs with the same ID, the server will generate only one image at the width and height for one of them; both ImageOutputs will receive the same image data. but it will only be sized for one of the ImageOutputs.

      // With explicit dimensions
      <ImageOutput id="myplot" width="100%" height="300px" />

      // With CSS-controlled dimensions
      <ImageOutput id="myplot" className="output-image" />

      // Full viewport height
      <ImageOutput id="myplot" className="full-height-image" />

      .full-height-image {
        width: 100%;
        height: 100dvh;
      }

      <div className="flex-container">
        <ImageOutput id="myplot" className="flex-image" />
      </div>

      .flex-container {
        display: flex;
        flex-direction: column;
      }

      .flex-image {
        flex: 1;
        width: 100%;
        height: 100%;
        min-height: 300px;
      }

    Settings
    Member Visibility