.NET 9中如何在CSS里从资产访问Blazor静态文件？

.NET 9新增的MapStaticAssets功能可以优化静态资产的交付，解决浏览器缓存旧资产、自动提供压缩版本等问题。在Razor组件里，只需通过@Assets指令就能引用静态文件，示例：

<img src="@Assets["/images/picture.jpg"]" />

但如果是在Razor组件外（比如CSS文件里设置背景图），该怎么正确访问这些资产？比如下面的场景：

.section { background-image: url("images/background.jpg"); }

这里提供几种实用方案：

方案1：直接使用静态资产的基础路径前缀 #

如果你的MapStaticAssets配置了固定的基础路径（比如/static），直接在CSS里写完整路径即可：

.section { background-image: url("/static/images/background.jpg"); }

这种方式简单直接，适合基础路径不会变动的场景。

方案2：利用资产清单生成哈希化路径 #

MapStaticAssets会为静态文件生成哈希后缀（用于缓存破击），要在CSS中用上这个特性，可以按以下步骤操作：

1. 在Program.cs里开启资产清单生成：

app.MapStaticAssets(options =>
{
    options.GenerateAssetManifest = true;
});

2. 在Razor布局文件中，从资产清单获取文件路径并定义CSS变量：

@{
    var assetManifest = HttpContext.RequestServices.GetRequiredService<IAssetManifest>();
}
<style>
    :root {
        --bg-image-url: "@assetManifest["/images/background.jpg"]";
    }
</style>

3. 在CSS文件中引用这个变量：

.section { background-image: url(var(--bg-image-url)); }

这种方式能充分利用缓存优化，确保浏览器加载最新版本的静态文件。

方案3：将CSS与Razor组件绑定 #

如果CSS是某个组件专属的，可以把CSS直接写在Razor组件的<style>标签里，这样就能直接使用@Assets指令：

<style>
    .section { background-image: url("@Assets["/images/background.jpg"]"); }
</style>

要是用的是组件CSS隔离（.razor.css文件），可以在组件代码块中定义路径变量，再在隔离CSS中引用：

@code {
    private string BackgroundImageUrl => Assets["/images/background.jpg"];
}

<style>
    .section { background-image: url("@BackgroundImageUrl"); }
</style>

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