Matterway
    Preparing search index...

    Function image

    • Image viewer component for displaying and interacting with images.

      Parameters

      • props: UiImageProps

        Configuration object

        • src

          Image source (base64, blob URL, or data URL). Can be either a static string or a function that receives params with data and value, returning a string

        • filename

          Filename to display and use for downloads. Can be either a static string or a function that receives params with data and value, returning a string

        • errorMessage

          Custom error message to display when image loading fails. Can be either a static string or a function that receives params with data and value, returning a string

        • loadingMessage

          Custom loading message to display while image is loading. Can be either a static string or a function that receives params with data and value, returning a string

        • debounceMs

          Debounce time in milliseconds for image loading. Defaults to 300

        • id

          HTML id attribute for the image element

      Returns Element

      Basic usage with static image

      image({
        src: 'data:image/png;base64,iVBORw0KGgoAAAANSU...',
        filename: 'screenshot.png'
      });

      Usage with dynamic image from params with data and value

      image({
        src: ({data}) => data.currentDocument.imageData,
        filename: ({data}) => `${data.currentDocument.name}.${data.currentDocument.extension}`,
        errorMessage: ({data}) => `Failed to load ${data.currentDocument.name}`
      });

      Usage with custom settings and messages

      image({
        src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA...',
        filename: 'report.jpg',
        debounceMs: 500,
        loadingMessage: 'Processing image...',
        errorMessage: 'Image could not be displayed',
        id: 'main-image-viewer'
      });

    Settings