Blazor WebAssembly中字节数组类型图片无法显示，求可行实现方案

原有代码问题排查 #

• 确认imageBytes不是空数组，也没有在传输过程中被截断：如果是从后端API获取的字节数组，要确认API返回的是原始二进制流，没有被额外序列化为JSON字符串导致内容转义损坏
• 确认图片MIME类型和实际格式匹配：如果你的图片是png、webp、gif等非jpeg格式，要把data:image/jpeg里的jpeg替换为对应格式，否则浏览器无法正常解析base64内容

可行实现方案 #

方案1：修正版Base64实现（适合小图片） #

你的原有思路是可行的，多数情况是细节错误导致加载失败，修正后的代码如下：
C# 代码：

// 顶部定义字段
public string ImageDataUrl { get; set; }

// 处理字节数组逻辑
if (imageBytes != null && imageBytes.Length > 0)
{
    string base64Str = Convert.ToBase64String(imageBytes);
    // 按实际图片格式修改MIME类型，png对应image/png，webp对应image/webp
    ImageDataUrl = $"data:image/jpeg;base64,{base64Str}";
}

Razor 页面代码：

<!-- 仅当资源存在时渲染图片，避免展示加载失败占位符 -->
@if (!string.IsNullOrEmpty(ImageDataUrl))
{
    <img src="@ImageDataUrl" alt="图片描述" />
}

方案2：Blob对象URL实现（适合大图片，性能更优） #

该方案不需要对字节数组做Base64转码，大图片加载速度更快，还能避免Base64字符串过长导致的性能问题：

1. 先在wwwroot/index.html中引入JS方法，或者直接写在已有JS文件中：

// 从字节数组生成Blob访问地址
window.createImageUrl = (byteArray, mimeType) => {
    const blob = new Blob([byteArray], { type: mimeType });
    return URL.createObjectURL(blob);
}

// 页面销毁时调用，释放内存避免泄漏
window.releaseImageUrl = (url) => {
    URL.revokeObjectURL(url);
}

2. C# 代码：

// 注入JS运行时
[Inject] private IJSRuntime JSRuntime { get; set; }
private string _imageUrl;

// 初始化时生成访问地址
protected override async Task OnInitializedAsync()
{
    if (imageBytes != null && imageBytes.Length > 0)
    {
        _imageUrl = await JSRuntime.InvokeAsync<string>("createImageUrl", imageBytes, "image/jpeg");
    }
}

// 实现异步释放接口，页面销毁时释放资源
public async ValueTask DisposeAsync()
{
    if (!string.IsNullOrEmpty(_imageUrl))
    {
        await JSRuntime.InvokeVoidAsync("releaseImageUrl", _imageUrl);
    }
}

3. Razor 页面代码：

@if (!string.IsNullOrEmpty(_imageUrl))
{
    <img src="@_imageUrl" alt="图片描述" />
}

内容的提问来源于stack exchange，提问作者sameeh shadid