Blazor Server应用无法显示本地保存图片如何解决

问题根因 #

Blazor Server 是服务端运行的Web应用，浏览器仅能加载通过HTTP/HTTPS协议暴露的Web静态资源。你代码中写的..\samplePic\logo.png属于服务器本地文件系统路径，一方面不符合Web路径规范（Web路径必须使用正斜杠/，不能使用Windows系统的反斜杠\），另一方面对应文件没有被Web服务器托管为可对外访问的资源，因此无法加载。在线图片可正常显示，本质是其本身就是公网可访问的HTTP资源，符合浏览器加载规则。

标准解决方案（推荐） #

ASP.NET Core 默认将wwwroot目录作为静态文件托管根目录，放到该目录下的文件可直接通过Web路径访问，无需额外配置：

• 将你的samplePic文件夹整体移动到项目根目录的wwwroot文件夹内，最终文件物理路径为wwwroot/samplePic/logo.png
• 将img标签的路径改为Web根相对路径（开头加/代表从静态资源根目录查找，不要写..形式的相对路径，避免路由匹配错误）：

<img src="@imageSource" alt="logo"/>
@code {
    private string? imageSource =  "/samplePic/logo.png";
}

如果直接写静态路径，写法如下：

<img src="/samplePic/logo.png" alt="logo"/>

• 右键点击logo.png文件，选择「属性」，将「复制到输出目录」选项设置为如果较新则复制，避免发布时图片没有被带入发布目录导致404。

特殊场景：图片存放在非wwwroot目录 #

如果图片需要存放在wwwroot外的其他目录（比如项目同级的外部存储目录、服务器其他磁盘路径），需要手动配置静态文件中间件映射资源路径，以.NET 6+的Program.cs为例：

• 先确保已经添加默认静态文件中间件（默认项目模板会自带这行），再新增自定义静态目录映射，注意这段配置必须写在路由配置、Blazor相关中间件之前：

var builder = WebApplication.CreateBuilder(args);
// ... 其他服务注册代码
var app = builder.Build();

// 配置HTTP请求管道
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

// 默认wwwroot静态文件托管，项目默认自带
app.UseStaticFiles();

// 新增：映射非wwwroot的图片目录
app.UseStaticFiles(new StaticFileOptions
{
    // 替换为图片实际存放的物理路径
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "samplePic")),
    // 对外暴露的Web访问路径，可自定义
    RequestPath = "/custom-images"
});

app.UseRouting();
app.UseAuthorization();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();

• 前端引用时使用配置的RequestPath作为路径前缀即可：

<img src="/custom-images/logo.png" alt="logo"/>

注意事项 #

• 所有Web资源路径统一使用正斜杠/，禁止使用Windows系统的反斜杠\
• 不要直接写磁盘绝对路径（比如C:\files\logo.png），浏览器出于安全限制永远无法直接访问服务器本地磁盘的未托管文件
• 如果发布后出现图片404，优先检查图片是否被正确复制到发布目录，以及路径是否以/开头写对了根路径

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