ASP.NET Core Razor Pages应用背景图切换页面后丢失URL前缀问题

云上老周

2026-8-2

Razor Pages背景图URL前缀丢失问题解决方案

问题原因：你用了相对路径指定背景图，首次登录时页面处于应用根路由（/PORTAL/），路径解析正常；但切换页面后路由层级变化，相对路径无法正确匹配根前缀，导致URL丢失/PORTAL/部分。
修复步骤：
1. 内联样式/页面内CSS修复：利用Razor的Url.Content()生成正确的根相对路径，替换原有背景图路径：
```
background-image: url('@Url.Content("~/hero-range-1.jpg")');
```
  ~会自动映射到应用部署根路径，ASP.NET Core会根据当前环境自动补全/PORTAL/这类前缀。
2. 外部CSS文件修复：外部CSS无法直接使用Razor语法，可通过布局页注入根路径变量：
  - 在布局页<head>中添加全局变量：
```
<style>
  :root {
    --app-base-path: '@Url.Content("~/")';
  }
</style>
```
  - 外部CSS中调用变量拼接路径：
```
background-image: url(var(--app-base-path)hero-range-1.jpg);
```
3. 规范页面跳转：页面间跳转使用asp-page标签助手，避免硬编码相对路径导致路由层级混乱：
```
<a asp-page="/Index">返回首页</a>
```
验证方法：修改后切换页面再返回首页，检查浏览器开发者工具中背景图的URL，确认/PORTAL/前缀始终存在。