RadzenFileInput displays broken image when showing uploaded byte[] as base64 inline image

Radzen.Blazor Components
1

Hi everyone,

I’m having an issue when trying to preview an image that I upload using <RadzenFileInput>.

I’m binding the Value to a byte[] property and then trying to display it below using a base64 data URI.
However, the image shows as a broken image icon, even though the file uploads and the byte array is populated correctly.

Here’s the code :

<RadzenStack AlignItems="AlignItems.Center">
    <RadzenCard class="rz-m-0 rz-m-md-12" Style="width: 100%; max-width: 600px;">
        <RadzenFileInput @bind-Value=@photo @bind-FileName=@fileName @bind-FileSize=@fileSize TValue="byte[]" Style="width: 100%" 
            Change=@(args => OnChange(args, "FileInput")) Error=@(args => OnError(args, "FileInput")) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select file" }})"/>
    </RadzenCard>
</RadzenStack>
<RadzenStack AlignItems="AlignItems.Center" class="rz-mx-auto rz-my-12">
    @if (photo != null && photo.Length > 0)
    {
        <img src="@($"data:image/jpeg;base64,{Convert.ToBase64String(photo)}")" alt="binary image" style="max-width:100%;" />
    }
</RadzenStack>
<EventConsole @ref=@console />

@code {
    EventConsole console;
    byte[] photo;

    string fileName;
    long? fileSize;

void OnChange(byte[] value, string name)
{
    photo = value; // <-- assign the uploaded bytes here
    console.Log($"{name} value changed, size: {photo?.Length}");
}

    void OnError(UploadErrorEventArgs args, string name)
    {
        console.Log($"{args.Message}");
    }
}
2

Check if this is not already part of the string.