求助：ASP.NET MVC 5项目中Metronic 4.5.2登录页背景图无法显示

核心问题原因 #

ASP.NET MVC Razor视图中，内联样式（inline style）里的~/路径不会被自动解析为应用根路径，浏览器会直接将其作为URL的一部分处理，导致无法正确定位图片资源。同时还可能存在文件路径错误、静态文件权限或样式缺失的问题。

具体解决步骤 #

• 修正路径解析：使用Razor的@Url.Content()方法生成正确的服务器路径，替换内联样式中的~/。修改后的代码如下：

<div class="col-md-6 bs-reset">
    <div class="login-bg" style="background-image:url('@Url.Content("~/Scripts/assets/pages/img/login/bg1.jpg")')">
        <img class="login-logo" src="@Url.Content("~/Scripts/assets/pages/img/login/logo.png")" />
    </div>
</div>

• 验证文件存在性：确认~/Scripts/assets/pages/img/login/目录下确实存在bg1.jpg和logo.png文件，注意文件名和路径的大小写（部署到非Windows服务器时大小写敏感）。
• 检查静态文件权限：确保ASP.NET MVC允许访问Scripts文件夹下的静态文件。若自定义过web.config，需确认未添加限制静态文件访问的规则。默认情况下，项目根目录的web.config已配置允许静态文件访问：

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
    </staticContent>
</system.webServer>

• 确认样式完整性：检查login-bg类的CSS样式是否包含必要属性，确保背景图能正常显示。Metronic默认的login-bg样式应包含宽高、背景尺寸等设置，若缺失需补充：

.login-bg {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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