Image

This node renders an image from a URL.

The Image node displays static or dynamic images with support for sizing and fitting modes.

The Image node renders an <img> tag. You can provide a source URL (from a database, asset library, or external link). It includes controls for how the image fits within its bounding box (cover, contain, fill).

Inputs

Content

Data	Description
Source	The URL of the image.
Alternate text	Accessibility text description.

Layout

Data	Description
Image Fit	"Cover" (crop to fill), "Contain" (fit inside), "Fill" (stretch), "None".

Outputs

Events

Signal	Description
On Load	Triggered when the image successfully loads.
On Error	Triggered if the image fails to load (e.g., 404).

Usage

User Avatar

1. Add an Image.
2. Set Width and Height to 50px.
3. Set Border Radius to 25px (Circle).
4. Connect User.AvatarUrl to Source.
5. Set Image Fit to "Cover".

Hero Banner

1. Add an Image.
2. Set Width to 100%.
3. Set Height to 300px.
4. Set Image Fit to "Cover".

Detailed Behavior

• Aspect Ratio: If dimensions are not set, it displays at natural size.
• Caching: Browsers automatically cache images based on headers.

Troubleshooting

• Broken Image: Use the On Error signal to show a fallback image or placeholder if the URL fails.