Blazor应用中<img>标签无法显示RGB24格式图片字节数组

核心问题 #

你直接把RGB24/RGBA原始像素字节数组转成Base64后当作PNG数据使用是错误的——浏览器期望的是符合PNG文件规范的完整数据（包含文件头、压缩信息等），而原始像素数据只是未封装的裸数据，浏览器无法解析，因此显示图片缺失图标。

解决方案 #

需要把原始像素数据编码为标准的PNG格式字节流，再转Base64渲染。以下是具体实现方式：

1. 使用ImageSharp库处理（推荐） #

ImageSharp是.NET生态中常用的图像处理库，能轻松将原始像素数据转为PNG：

• 先安装NuGet包：Install-Package SixLabors.ImageSharp
• 在Blazor组件中添加处理逻辑：

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Formats.Png;

public byte[] ImageData { get; set; } // 原始RGB24/RGBA字节数组
public int ImageWidth { get; set; } // 图片宽度，需提前明确
public int ImageHeight { get; set; } // 图片高度，需提前明确

// 将原始像素转为PNG字节数组
private byte[] ConvertRawPixelsToPng()
{
    if (ImageData == null || ImageWidth <= 0 || ImageHeight <= 0)
        return Array.Empty<byte>();

    // 根据像素格式选择对应类型：RGB24用<Rgb24>，RGBA用<Rgba32>
    using var image = Image.LoadPixelData<Rgb24>(ImageData, ImageWidth, ImageHeight);
    using var ms = new MemoryStream();
    image.Save(ms, new PngEncoder());
    return ms.ToArray();
}

• 视图中修改渲染代码：

<img src="@($"data:image/png;base64,{Convert.ToBase64String(ConvertRawPixelsToPng())}")" />

2. 手动构建PNG（不推荐，复杂易出错） #

如果不想依赖第三方库，需要手动实现PNG的文件头、IHDR块、IDAT块（含Deflate压缩的像素数据）、IEND块等结构，过程繁琐且易出现格式错误，仅适合对PNG格式非常熟悉的场景。

额外注意事项 #

• 确保ImageWidth和ImageHeight与原始像素数据的尺寸完全匹配，否则会出现像素错位或解析失败
• 若为RGBA格式，将代码中的<Rgb24>替换为<Rgba32>即可
• 定期更新图片数据后，需调用StateHasChanged()通知Blazor重新渲染视图

内容的提问来源于stack exchange，提问作者James Harcourt