如何在 Blazor 自动模式下使 wwwroot/images 成为 Web 程序集的一部分？

Question

我正在使用新的 .NET 8 Web App 模板，该模板创建一个主服务器项目和一个客户端 WASM 项目。

对于客户端 WASM 项目，它按预期工作，因为当与服务器通信时，客户端功能立即在客户端完成。但是，对于 wwwroot 文件夹中的任何图像，这些图像都是从服务器获取的。

有没有办法让图像和资产成为 WASM 文件的 wwwroot 部分，这样就不需要从服务器获取它们？我意识到我可以设置图像缓存，但这似乎是一种创可贴修复，而且我还希望一次性下载完整的客户端应用程序（包括图像），以获得更流畅的用户体验。

我该怎么办？作为参考，我用于图像的 wwwroot 实际上位于 .Client WASM 项目中，但它们仍在远程获取。

Answer 1

您可以尝试使用

EmbeddedResource

作为以下示例。
假设我们有一个 jpg 和 txt。 （其实不用把文件放在wwwroot下）

将以下内容添加到 csproj

    <ItemGroup>
        <EmbeddedResource Include="wwwroot\Assets\test.jpg" />
        <EmbeddedResource Include="wwwroot\Assets\abc.txt" />
    </ItemGroup>

Home.剃须刀

@page "/"
@using System.Reflection

<img src="@imagePath">
<p />
@txtDisaply

@code
{
    private string txtDisaply { get; set; }
    private string imagePath { get; set; }

    protected override void OnInitialized()
    {
        using var textStream = Assembly.GetExecutingAssembly()
          .GetManifestResourceStream("BlazorApp132.wwwroot.Assets.abc.txt");
        using var tr = new StreamReader(textStream);
        txtDisaply = tr.ReadToEnd();

        using var imageStream = Assembly.GetExecutingAssembly()
          .GetManifestResourceStream("BlazorApp132.wwwroot.Assets.test.jpg");
        using var ms = new MemoryStream();
        imageStream.CopyTo(ms);
        var bytes = ms.ToArray();
        imagePath = $"data:img/png;base64,{Convert.ToBase64String(bytes)}";
    }
}

测试结果