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.
IComponent
IHandleEvent
IHandleAfterRender
RadzenComponentWithChildren.ChildContent
RadzenComponent.GetComponentCssClass
RadzenComponent.SetParametersAsync
RadzenComponent.OnAfterRenderAsync
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
ComponentBase.OnInitializedAsync
ComponentBase.OnParametersSet
ComponentBase.OnParametersSetAsync
ComponentBase.StateHasChanged
ComponentBase.ShouldRender
ComponentBase.OnAfterRender
ComponentBase.InvokeAsync
ComponentBase.DispatchExceptionAsync
ComponentBase.RendererInfo
ComponentBase.Assets
ComponentBase.AssignedRenderMode
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
public class RadzenImage : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRenderBasic 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" />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.
public RadzenImage()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.
public string AlternateText { get; set; }| Type | Description |
|---|---|
| string | 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. |
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.
public EventCallback<MouseEventArgs> Click { get; set; }| Type | Description |
|---|---|
| EventCallback<MouseEventArgs> | 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. |
Gets or sets the image source path or URL. Supports file paths (relative or absolute), external URLs, or data URLs with base64-encoded images.
public string Path { get; set; }| Type | Description |
|---|---|
| string | Gets or sets the image source path or URL. Supports file paths (relative or absolute), external URLs, or data URLs with base64-encoded images. |
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)| Type | Name | Description |
|---|---|---|
| Rendering.RenderTreeBuilder | __builder |
Handles the click event.
protected Task OnClick(MouseEventArgs args)| Type | Name | Description |
|---|---|---|
| MouseEventArgs | args | The MouseEventArgs instance containing the event data. |
| Type | Description |
|---|---|
| Task |
Handles keyboard activation for clickable images.
protected Task OnKeyDown(KeyboardEventArgs args)| Type | Name | Description |
|---|---|---|
| KeyboardEventArgs | args | The KeyboardEventArgs instance containing the event data. |
| Type | Description |
|---|---|
| Task |