如何在.NET 8 Blazor自动模式下将wwwroot/images纳入WASM程序集？

要把WASM客户端项目wwwroot里的图片直接打包进WASM二进制文件，无需每次从服务器请求，按以下步骤操作：

1. 修改项目文件，将图片设为嵌入资源 #

打开你的.Client WASM项目的.csproj文件，添加或修改以下配置，把目标图片标记为嵌入资源，并启用嵌入文件清单：

<PropertyGroup>
  <!-- 启用嵌入文件清单，让程序能识别嵌入的资源 -->
  <GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest>
</PropertyGroup>

<ItemGroup>
  <!-- 把wwwroot下的所有图片设为嵌入资源，可根据需要调整通配符，比如只包含images文件夹 -->
  <EmbeddedResource Include="wwwroot\**\*.png;wwwroot\**\*.jpg;wwwroot\**\*.svg">
    <!-- 保留原始路径，方便后续映射 -->
    <LogicalName>%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
  </EmbeddedResource>
  <!-- 排除这些图片作为默认的静态资源，避免重复发布 -->
  <Content Remove="wwwroot\**\*.png;wwwroot\**\*.jpg;wwwroot\**\*.svg" />
</ItemGroup>

2. 在Program.cs中注册嵌入资源提供器 #

在WASM客户端的Program.cs里，添加代码注册EmbeddedFileProvider，让Blazor能从嵌入资源中读取这些图片：

using Microsoft.Extensions.FileProviders;
using System.Reflection;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// 注册嵌入资源提供器，使用当前程序集
builder.Services.AddSingleton<IFileProvider>(
    new EmbeddedFileProvider(Assembly.GetExecutingAssembly())
);

// 其他服务注册...

await builder.Build().RunAsync();

3. 调整图片引用路径 #

修改前端代码里的图片引用路径，确保指向嵌入资源的路径。如果想兼容原有路径（比如/images/logo.png），可以在Program.cs里添加静态文件中间件的映射：

// 在builder.Build()之前添加
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// 添加静态文件映射，将原有路径指向嵌入资源
builder.WebHost.Configure(app =>
{
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new EmbeddedFileProvider(Assembly.GetExecutingAssembly()),
        RequestPath = "" // 若设为"/wwwroot"，则引用路径需改为"/wwwroot/images/logo.png"，按需调整
    });
});

注意事项 #

• 测试前清理浏览器缓存，避免加载旧的服务器资源。
• 嵌入资源会增大WASM文件体积，建议仅打包必要的小图片，大资源仍推荐缓存方案。
• 可通过Assembly.GetExecutingAssembly().GetManifestResourceNames()查看所有嵌入资源名称，排查路径匹配问题。

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