LogoLogo
  • What is UDML?
  • Document structure
    • <components>
    • <imports>
    • <instructions>
    • <meta>
    • <styles>
    • <tokens>
    • <mappings>
    • <screens>
  • Directives
    • ai-hint
    • <data> Directive Specification
    • <interaction> Directive
    • <layer> Directive
    • <repeat> Directive
    • <responsive>
    • selection
    • <tracking> Directive
  • Components
    • Layout
      • <accordion> Component
      • <box> Component
      • <column> Component
      • <divider>
      • <grid> Component
      • <row> Component
    • Navigation
      • <breadcrumbs> Component
      • <pagination> Component
      • <tab> Component
      • <tabs> Component
    • Text & Display
      • <avatar>
      • <heading>
      • <icon>
      • <image>
      • <label>
      • <text>
      • <video>
    • Controls & Input
      • <button>
      • <checkbox>
      • <input> Component
      • <radio>
      • <select>
      • <slider>
      • <stepper>
      • <switch>
      • <textarea>
    • Forms
      • <form> Component
      • <formField> Component
      • <formGroup> Component
    • Data Collections
      • <dataColumn> Component
      • <dataTable> Component
      • <list> Component
      • <timeline> Component
      • <treeView> Component
    • Data Visualization
      • <chart> Component
      • <summary> Component
    • Modals
      • <dialog> Component
      • <modal> Component
      • <popover> Component
      • <toast> Component
      • <tooltip> Component
  • Prompting Guides
    • Prompting AI Developer Tools with UDML
    • Working with UDML in an Existing Codebase
  • Contributing to UDML
Powered by GitBook
On this page
  • The <image> component renders an image with optional alt text, sizing, and display fit.
  • 🛠 Attributes
  • ✅ Allowed Content
  • 💡 Examples
  • 🧩 AI Interpretation Guidelines
Edit on GitHub
  1. Components
  2. Text & Display

<image>

The <image> component renders an image with optional alt text, sizing, and display fit.

🛠 Attributes

Attribute
Type
Required
Description

src

string

Yes

Image source path or URL

alt

string

No

Accessible description or label

fit

string

No

cover, contain, or fill

width

string

No

Fixed or max width

height

string

No

Fixed or max height

radius

string

No

Corner rounding

fillStyle

string

No

Background or surface styling

✅ Allowed Content

Self-closing only.

💡 Examples

Hero image

<image src="cover.jpg" fit="cover" alt="Hero banner"/>

🧩 AI Interpretation Guidelines

  • Render with img tag or equivalent image component.

  • Respect alt for accessibility.

  • Map fit and radius to object-fit and border-radius.

Previous<icon>Next<label>

Last updated 2 months ago