@page "/image"
@page "/docs/guides/components/image.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Image
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Image</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase image display from multiple sources including application assets, external URLs, base64 encoded strings, and binary data, providing flexible image rendering options.
</RadzenText>

<RadzenText Anchor="image#image-from-application-assets" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Image from application assets
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Display images from the application's wwwroot folder using a relative path.
</RadzenText>
<RadzenExample ComponentName="Image" Example="ImageAppAssets">
    <ImageAppAssets />
</RadzenExample>

<RadzenText Anchor="image#image-from-url" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Image from url
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Load and display images from external URLs or web addresses.
</RadzenText>
<RadzenExample ComponentName="Image" Example="ImageUrl">
    <ImageUrl />
</RadzenExample>

<RadzenText Anchor="image#image-from-base64" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Image from base64 encoded string
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Display images encoded as base64 data URIs for embedding image data directly in the markup.
</RadzenText>
<RadzenExample ComponentName="Image" Example="ImageBase64">
    <ImageBase64 />
</RadzenExample>

<RadzenText Anchor="image#image-from-binary-data" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Image from binary data
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Display images from binary byte arrays by converting them to base64 format.
</RadzenText>
<RadzenExample ComponentName="Image" Example="ImageBinaryData">
    <ImageBinaryData />
</RadzenExample>
