Class RadzenImage
An image display component that renders images from various sources including URLs, base64 data, or application assets. RadzenImage provides a simple wrapper for HTML img elements with click event support and alternate text for accessibility. Can display images from file paths (relative or absolute URLs to image files), external URLs (full HTTP/HTTPS URLs to remote images), base64 data (data URLs with embedded image data, e.g., from file uploads or database BLOBs), and application assets (images from wwwroot or other application folders). Use AlternateText to provide descriptive text for screen readers and when images fail to load. The Click event can be used to make images interactive (e.g., opening lightboxes or navigating). Combine with CSS (via Style or class attributes) for sizing, borders, shadows, and other visual effects.
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenImage : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRender, IDisposableExamples
Basic image from file:
<RadzenImage Path="images/logo.png" AlternateText="Company Logo" Style="width: 200px;" />Image with click handler:
<RadzenImage Path=@product.ImageUrl AlternateText=@product.Name Click=@(args => ShowImageGallery(product)) Style="cursor: pointer;" />Image from base64 data:
<RadzenImage Path=@($"data:image/jpeg;base64,{base64String}") AlternateText="Uploaded Photo" />Constructors
RadzenImage()
An image display component that renders images from various sources including URLs, base64 data, or application assets. RadzenImage provides a simple wrapper for HTML img elements with click event support and alternate text for accessibility. Can display images from file paths (relative or absolute URLs to image files), external URLs (full HTTP/HTTPS URLs to remote images), base64 data (data URLs with embedded image data, e.g., from file uploads or database BLOBs), and application assets (images from wwwroot or other application folders). Use AlternateText to provide descriptive text for screen readers and when images fail to load. The Click event can be used to make images interactive (e.g., opening lightboxes or navigating). Combine with CSS (via Style or class attributes) for sizing, borders, shadows, and other visual effects.
Declaration
public RadzenImage()Examples
Basic image from file:
<RadzenImage Path="images/logo.png" AlternateText="Company Logo" Style="width: 200px;" />Image with click handler:
<RadzenImage Path=@product.ImageUrl AlternateText=@product.Name Click=@(args => ShowImageGallery(product)) Style="cursor: pointer;" />Image from base64 data:
<RadzenImage Path=@($"data:image/jpeg;base64,{base64String}") AlternateText="Uploaded Photo" />Properties
AlternateText
Gets or sets the alternate text describing the image for accessibility and when the image fails to load. This text is read by screen readers and displayed if the image cannot be shown. Always provide descriptive alternate text for better accessibility.
Declaration
[Parameter]
public string AlternateText { get; set; }Property Value
| Type | Description |
|---|---|
| string | The image alternate text. Default is "image". |
Click
Gets or sets the callback invoked when the image is clicked. Use this to make images interactive, such as opening modal viewers, navigating, or triggering actions.
Declaration
[Parameter]
public EventCallback<MouseEventArgs> Click { get; set; }Property Value
| Type | Description |
|---|---|
| EventCallback<MouseEventArgs> | The click event callback. |
Path
Gets or sets the image source path or URL. Supports file paths (relative or absolute), external URLs, or data URLs with base64-encoded images.
Declaration
[Parameter]
public string Path { get; set; }Property Value
| Type | Description |
|---|---|
| string | The image source path, URL, or data URL. |
Methods
BuildRenderTree(RenderTreeBuilder)
An image display component that renders images from various sources including URLs, base64 data, or application assets. RadzenImage provides a simple wrapper for HTML img elements with click event support and alternate text for accessibility. Can display images from file paths (relative or absolute URLs to image files), external URLs (full HTTP/HTTPS URLs to remote images), base64 data (data URLs with embedded image data, e.g., from file uploads or database BLOBs), and application assets (images from wwwroot or other application folders). Use AlternateText to provide descriptive text for screen readers and when images fail to load. The Click event can be used to make images interactive (e.g., opening lightboxes or navigating). Combine with CSS (via Style or class attributes) for sizing, borders, shadows, and other visual effects.
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
OnClick(MouseEventArgs)
Handles the Click event.
Declaration
protected Task OnClick(MouseEventArgs args)Parameters
| Type | Name | Description |
|---|---|---|
| MouseEventArgs | args | The MouseEventArgs instance containing the event data. |
Returns
| Type | Description |
|---|---|
| Task |