Blazor客户端应用加载嵌入式图片的浏览器兼容问题解决方案咨询

问题根因 #

System.Drawing 相关API依赖Windows系统GDI+组件，Blazor WebAssembly运行在浏览器沙箱环境中，无相关底层依赖，因此无法直接使用。

方案1：仅需展示嵌入式图片（无需编辑） #

直接将嵌入式图片流转为Base64 Data URL，绑定到img标签的src属性即可，无需引入额外依赖：

示例代码 #

// 读取嵌入式资源流，注意路径要写全：默认命名空间 + 子文件夹路径（如果有） + 文件名
var stream = Assembly
    .GetExecutingAssembly()
    .GetManifestResourceStream("YourAppNamespace.myimg.jpg");

using var ms = new MemoryStream();
await stream.CopyToAsync(ms);
var imageBytes = ms.ToArray();
// 生成可直接绑定的Data URL
string ImageSrc = $"data:image/jpeg;base64,{Convert.ToBase64String(imageBytes)}";

Razor页面绑定 #

<img src="@ImageSrc" alt="嵌入式图片">

方案2：需要对图片做编辑处理（裁剪、加水印、改尺寸等） #

使用支持WASM环境的跨平台图形库SkiaSharp替代System.Drawing：

1. 先安装NuGet包：SkiaSharp.Views.Blazor
2. 代码示例：

using SkiaSharp;

var stream = Assembly
    .GetExecutingAssembly()
    .GetManifestResourceStream("YourAppNamespace.myimg.jpg");

// 替代System.Drawing.Bitmap加载图片
using var skStream = new SKManagedStream(stream);
using var bmp = SKBitmap.Decode(skStream);

// 替代System.Drawing.Graphics做绘制操作
using var canvas = new SKCanvas(bmp);
using var paint = new SKPaint { 
    Color = SKColors.Red, 
    TextSize = 24,
    IsAntialias = true
};
// 示例：加水印
canvas.DrawText("测试水印", 20, 40, paint);

// 处理后导出为Data URL展示
using var outputMs = new MemoryStream();
bmp.Encode(SKEncodedImageFormat.Jpeg, 90).SaveTo(outputMs);
string ProcessedImageSrc = $"data:image/jpeg;base64,{Convert.ToBase64String(outputMs.ToArray())}";

注意事项 #

• 图片的生成操作必须设置为「嵌入式资源」：右键图片文件 → 属性 → 生成操作 → 选择嵌入式资源
• 资源路径不要遗漏程序集默认命名空间，如果图片放在项目的子文件夹下，需要在命名空间后拼接文件夹名称，比如图片放在Assets/imgs目录下，路径为YourAppNamespace.Assets.Imgs.myimg.jpg

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