.NET MAUI Blazor Hybrid/Web App图片无法渲染问题求助

1. 修正图片引用路径 #

Blazor中静态资源（如图片）需以/开头指向wwwroot根路径，而非相对文件路径。修改home.razor代码如下：

@page "/"

<h1>Hello, world!</h1>

<img src="/favicon.png" />
Welcome to your new app.
<!-- 注：dotnet_bot.svg为MauiImage资源，Web端无法直接访问，需单独处理 -->

2. 统一跨平台图片资源处理 #

若需图片在Hybrid（Windows/Android）和Web端通用：

• 将图片移至wwwroot/images目录，设置生成操作为Content
• 统一使用根路径引用：/images/dotnet_bot.svg

若保留Resources/Images下的MauiImage资源，需在Web项目的.csproj中添加配置，手动同步资源到wwwroot：

<ItemGroup>
  <Content Include="..\YourMauiProject\Resources\Images\dotnet_bot.svg" Link="wwwroot/images/dotnet_bot.svg" CopyToOutputDirectory="PreserveNewest" />
</ItemGroup>

3. 修复Web项目wwwroot缺失问题 #

针对.NET MAUI Blazor Hybrid and Web App模板的Web项目：

1. 在Web项目根目录手动创建wwwroot文件夹
2. 将Web端需显示的图片（如favicon.png）复制到该目录
3. 在Web项目的.csproj中添加资源配置：

<ItemGroup>
  <Content Include="wwwroot/**/*" />
</ItemGroup>

4. .NET 8临时修复（若仍使用该版本） #

确保Hybrid项目资源配置正确：

• 确认Resources/Images下图片的生成操作为MauiImage
• 在Hybrid项目的.csproj中添加Blazor资源映射：

<ItemGroup>
  <BlazorWebViewStaticAsset Include="wwwroot/**/*" />
</ItemGroup>

5. 清理重建项目 #

完成配置后执行以下步骤，确保资源正确输出：

• 点击VS顶部菜单「生成」→「清理解决方案」
• 删除所有项目的bin/obj目录
• 重新生成解决方案并运行

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