Skip to main content

Image

Reference

  • The Image component is used to display an image with customizable styles and a placeholder fallback while the image is loading.

Components:​

  1. StyledImage: A styled <img> element with customizable properties like height, width, resizeMode, and maxHeight.

Props:​

  • src: The source URL of the image.
  • alt: The alternative text for the image.
  • height: The height of the image (default: auto).
  • width: The width of the image (default: auto).
  • resizeMode: Specifies how the image should fit (e.g., fill, contain, cover).
  • style: An optional inline style object for additional customization.

Usage:​

  • Displays an image with a placeholder (placeholder.png) until the actual image is fully loaded.
  • Useful for handling images with dynamic dimensions and fallback behavior.

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { Image } = protrakComponents;

 return <Image src={logoUrl} alt="Company_Logo" height="40px" width="auto" />;
}