MAUI Blazor中CacheDirectory图片无法显示问题求助

问题核心：Blazor WebView基于Web环境，无法直接访问本地文件系统路径（如C:\Users\...\Cache\a.jpeg），必须通过Web可识别的方式提供图片内容。

方法一：Base64编码（适合小图片） #

将图片文件读取为字节数组，转换为Base64字符串后，通过data URI提供给img标签：

<img src="@ImageBase64" width="200" height="200" />

@code {
    private string ImageBase64 { get; set; } = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        var imagePath = Path.Combine(Microsoft.Maui.Storage.FileSystem.CacheDirectory, "a.jpeg");
        if (File.Exists(imagePath))
        {
            var imageBytes = await File.ReadAllBytesAsync(imagePath);
            // 根据图片格式调整MIME类型，png需改为image/png
            ImageBase64 = $"data:image/jpeg;base64,{Convert.ToBase64String(imageBytes)}";
        }
    }
}

方法二：创建API端点（适合大图片） #

通过应用内的最小API端点返回图片流，避免Base64的体积膨胀问题：

步骤1：在MauiProgram.cs中注册API端点 #

using Microsoft.AspNetCore.Http;
using Microsoft.Maui.Storage;

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    });

builder.Services.AddMauiBlazorWebView();
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
#endif

// 添加路由和API支持
builder.Services.AddRouting();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBlazorWebViewDeveloperTools();
}
else
{
    app.UseExceptionHandler("/Error");
}

app.UseStaticFiles();
app.UseRouting();

// 注册获取缓存图片的端点
app.MapGet("/cache-image/{filename}", async (string filename, HttpContext context) =>
{
    var imagePath = Path.Combine(FileSystem.CacheDirectory, filename);
    if (!File.Exists(imagePath))
    {
        context.Response.StatusCode = StatusCodes.Status404NotFound;
        return;
    }

    // 根据文件后缀设置MIME类型
    var mimeType = filename.ToLower() switch
    {
        var f when f.EndsWith(".jpeg") || f.EndsWith(".jpg") => "image/jpeg",
        var f when f.EndsWith(".png") => "image/png",
        _ => "application/octet-stream"
    };

    context.Response.ContentType = mimeType;
    await using var stream = new FileStream(imagePath, FileMode.Open, FileAccess.Read);
    await stream.CopyToAsync(context.Response.Body);
});

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

步骤2：在Blazor组件中调用端点 #

<img src="/cache-image/a.jpeg" width="200" height="200" />

注意事项 #

• 确认图片文件存在且路径正确，可通过File.Exists()验证
• 若使用AppDataDirectory，只需替换代码中的FileSystem.CacheDirectory为FileSystem.AppDataDirectory即可
• 大图片优先选择API端点方案，Base64会使图片体积增加约30%

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