Image - Basic Usage

The Image component displays an image on a web page, emulating the ASP.NET Web Forms Image control.

---

Basic Image

A simple image with alternate text:

Code:

<Image ImageUrl="/Content/Images/banner.png" 
       AlternateText="Banner image" />

---

Sized Image

An image with explicit width and height:

Code:

<Image ImageUrl="/Content/Images/banner.png" 
       AlternateText="Sized image"
       Width="Unit.Pixel(200)"
       Height="Unit.Pixel(100)" />

---

Image Alignment

Images can be aligned using the ImageAlign property:

Code:

<Image ImageUrl="https://via.placeholder.com/80x80" 
       AlternateText="Left aligned image"
       ImageAlign="ImageAlign.Left" />
<p>This text flows around the left-aligned image...</p>

---

Dynamic Image with Visibility Toggle

Click the button to toggle image visibility:

Code:

<button @onclick="ToggleVisibility">Toggle</button>
<Image ImageUrl="..." AlternateText="Toggleable image" Visible="@isVisible" />

@code {
    private bool isVisible = true;
    
    void ToggleVisibility()
    {
        isVisible = !isVisible;
    }
}

---

Decorative Image (Empty Alt Text)

For decorative images that don't convey content, use GenerateEmptyAlternateText:

Code:

<Image ImageUrl="..." GenerateEmptyAlternateText="true" />