Blazor Maui无法显示含空格或特殊字符的图片问题求助

DevOps 小满

2026-8-5

问题描述

能正常显示文件名不含空格及特殊字符的图片，但带空格或特殊字符的图片无法显示。使用.NET 7环境，试过以下方法都没用：

Razor代码

<img class="actor-image" src="@EncodedActorImagePath" />

后台尝试的编码方式

// ActorImagePath = "images/actors/John Test.png"; // 文件确实存在

private string EncodedActorImagePath => Uri.EscapeDataString(ActorImagePath);

private string EncodedActorImagePath => ActorImagePath.Replace(" ", "%20");

private string EncodedActorImagePath => WebUtility.HtmlEncode(ActorImagePath);

private string EncodedActorImagePath => WebUtility.UrlEncode(ActorImagePath);

解决办法

1. 用`Url.Content`生成正确路径

Razor页面里直接用Url.Content解析静态文件路径，它会自动处理特殊字符，不用手动编码：

<img class="actor-image" src="@Url.Content(ActorImagePath)" />

2. 确认静态文件中间件配置正确

在Program.cs里检查是否启用了静态文件服务，默认静态文件放在wwwroot目录下：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

var app = builder.Build();

// 必须启用这个才能访问静态文件
app.UseStaticFiles();

app.MapRazorPages();

app.Run();

如果静态文件不在wwwroot，要指定自定义目录：

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "YourStaticFolder")),
    RequestPath = "/images"
});

3. 只编码文件名，别编码整个路径

非要手动处理的话，别把整个路径（包括目录分隔符）都编码，只处理文件名部分：

private string EncodedActorImagePath
{
    get
    {
        var dir = Path.GetDirectoryName(ActorImagePath);
        var fileName = Path.GetFileName(ActorImagePath);
        var encodedFileName = Uri.EscapeDataString(fileName);
        return Path.Combine(dir, encodedFileName).Replace("\\", "/");
    }
}

避免目录分隔符被编码后导致路径解析失败。