Blazor Maui应用无法显示Razor类库项目中图片的问题咨询

问题背景 #

• 开发环境：Visual Studio 2022 Preview 17.3.0 Preview 3.0、Windows 11 Pro 21H2
• 复现场景：Razor类库（RCL）wwwroot/Images目录下存放图片资源，Blazor Maui客户端已添加对该RCL的项目引用，两种图片引用写法均无法正常显示图片：
  1. 相对路径写法：

  <img src="../wwwroot/Images/CISA_Logo_183px.png" />
  

  2. 带wwwroot段的_content路径写法：

  <img src="_content/CSETRazorClassLibrary/wwwroot/images/CISA_Logo_183px.png" />
  

根因与修复步骤 #

1. 先修正图片引用路径 #

你写的两种路径都有问题：

• 第一种../wwwroot/xxx的相对路径写法仅在同项目内本地调试时可能偶然生效，RCL作为类库被引用后，内部文件不存在上层目录跳转的访问逻辑，完全无法命中资源。
• 第二种路径多写了/wwwroot段，且文件夹名大小写不匹配：RCL静态资源的映射规则是_content/[RCL程序集全称]/后直接跟wwwroot下的相对路径，不需要重复写wwwroot；另外MAUI跨平台运行时文件系统大小写敏感，你本地文件夹是大写开头的Images，路径里写小写images会直接触发404。

正确的图片引用代码如下，注意替换成你自己的RCL实际程序集名，严格匹配文件、文件夹大小写：

<img src="_content/CSETRazorClassLibrary/Images/CISA_Logo_183px.png" />

2. 检查RCL内静态文件的生成配置 #

打开Razor类库项目，找到目标图片文件，右键选择「属性」，确认两个配置项：

• 生成操作：选择Content
• 复制到输出目录：选择如果较新则复制
  如果生成操作选了None、嵌入资源等其他选项，打包时根本不会把图片纳入静态资源目录，路径写对也加载不到。

3. 补全Blazor Maui的预览版兼容配置 #

你用的17.3.0 Preview 3.0版本存在已知的RCL静态资源映射bug，不会自动拉取引用类库的静态资源，需要做两个小配置：

1. 打开Blazor Maui项目的MauiProgram.cs，确认已经添加Blazor WebView的基础服务（默认模板带的配置不要删）：

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    });
builder.Services.AddMauiBlazorWebView();
// 开发环境可以加下面这行开开发者工具，方便看网络请求报错
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
#endif

2. 右键Blazor Maui项目，选择「编辑项目文件」，在任意<ItemGroup>节点下添加如下配置，手动把RCL的静态资源纳入打包范围：

<Content Include="..\CSETRazorClassLibrary\wwwroot\**\*" LinkBase="_content/CSETRazorClassLibrary" />

加完之后清理解决方案，重新生成项目即可正常加载图片。如果后续升级到Visual Studio 2022 17.3正式版及以上版本，这步手动配置可以删掉，正式版已经修复了RCL静态资源自动映射的问题。

排查小技巧 #

如果改完还是加载失败，打开BlazorWebView的开发者工具，切到Network面板刷新页面，看图片请求的状态码：

• 返回404：优先核对路径拼写、大小写、RCL程序集名称是否正确
• 返回403：优先检查图片文件的生成操作配置是否正确
• 返回500：检查RCL和MAUI项目的目标框架是否兼容，不要出现RCL只支持netstandard2.0但MAUI项目只配置net6.0/7.0的情况

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