Skip to main content
The Image component displays static or dynamic images in your UI Studio pages. Use images to add visual content, branding, product photos, or clickable banners. The component supports clickthrough links, alternative text, and fallback images.

​
Basic usage

Add an image component to your UI Studio page to display visual content.
Basic Image component
Provide an image URL to display it on your page. The component supports common image formats including JPG, PNG, GIF, and SVG. If the primary image fails, the component automatically loads the fallback image if one is configured. If both images fail, the component does not display in order to avoid broken image icons. If there is no image URL, the component does not render.

​
Best practices

  • Optimize images to reduce file size without sacrificing quality. While Lucidworks does not make a specific recommendation, tools such as TinyPNG, ImageOptim, or your image editor’s “Save for Web” feature are available. The recommended maximum file size is 2MB for web display.
  • If possible, configure a fallback image that displays if the primary image fails to load.
  • Use appropriate image formats for different content types:
    • JPG: Photos and complex images
    • PNG: Graphics with transparency or text
    • SVG: Logos and icons to ensure correct scaling
    • WebP: Modern format with better compression, if browser support allows
  • Always provide meaningful Alt (alternative) text that conveys the purpose and content of the image. Screen readers rely on this to describe images to visually impaired users. Alt text also improves SEO and displays when images fail to load.
  • Avoid using images of text for important content. Screen readers cannot read text embedded in images.

​
Configuration properties

​
Image URL
string
URL to the image file.
​
Alt Text
string
Descriptive text for accessibility and SEO.Describe the image content and purpose. Avoid generic phrases like “image” or “photo”.
​
Link
string
Clickthrough URL. When configured, clicking the image navigates to this URL.Examples:
  • https://www.example.com
  • /products
  • https://example.com/offers
Leave blank for non-clickable images.
​
Fit Mode
dropdown
default:"cover"
Controls how the image fits within its container dimensions.
​
Border Radius (px)
number
default:"0"
Corner roundness in pixels.
  • 0 = Square corners (default)
  • 4-8 = Subtle rounded corners
  • 12-16 = Noticeably rounded corners
  • 50+ = Circular (when width equals height)
​
Fallback Image URL
string
Optional backup image URL. Displays if the primary image fails to load.