MAUI Blazor中如何引用Resources/Images下的SVG转换图片？

问题原因 #

MAUI对Resources/Images下的SVG做的转PNG处理，默认是生成到应用的资源目录（供XAML绑定用），但Blazor的<img>标签只能访问wwwroot下的静态资源，所以直接引用转换后的PNG会找不到。

解决方案：让MAUI把转换后的PNG输出到wwwroot #

编辑你的MAUI项目文件（.csproj），调整MauiSvg的输出配置，让转换后的PNG自动放到wwwroot目录下：

<ItemGroup>
  <!-- 匹配Resources/Images下的所有SVG文件 -->
  <MauiSvg Include="Resources\Images\*.svg">
    <!-- 指定输出到wwwroot/images目录 -->
    <OutputPath>wwwroot/images/</OutputPath>
    <!-- 确保文件更新时重新复制 -->
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    <!-- 可选：指定生成的PNG尺寸，比如Scale="1,2,3"生成多分辨率版本 -->
    <!-- <Scale>1</Scale> -->
  </MauiSvg>
</ItemGroup>

引用转换后的图片 #

重新构建项目后，MAUI会自动把SVG转成PNG并输出到wwwroot/images，此时在Razor页面中直接用web路径引用即可：

<img src="/images/one_list2.png" alt="列表图标" />

进阶：多分辨率适配（可选） #

如果需要适配不同屏幕分辨率，可以在MauiSvg中指定多个缩放比例，比如：

<MauiSvg Include="Resources\Images\one_list2.svg">
  <OutputPath>wwwroot/images/</OutputPath>
  <Scale>1,2,3</Scale>
  <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</MauiSvg>

构建后会生成one_list2@1x.png、one_list2@2x.png等文件，然后在Blazor中用srcset实现适配：

<img 
  src="/images/one_list2@1x.png" 
  srcset="/images/one_list2@1x.png 1x, /images/one_list2@2x.png 2x, /images/one_list2@3x.png 3x"
  alt="列表图标"
/>

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