ASP.NET Core中如何正确设置背景图片的URL引用路径

核心问题原因 #

你现在路径加载失败是两个常识错误导致的：

1. 静态资源访问规则限制：ASP.NET Core 默认仅对外公开 wwwroot 目录下的文件作为可访问静态资源，你当前把logo放在项目根目录c:\iasp\webapplication1\logo.jpg，不属于默认公开的静态资源目录，外部请求根本拿不到这个文件。
2. 路径符号适用场景错误：~/ 是 Razor 服务端视图引擎识别的应用根路径标识，直接写在CSS的url值里的话，浏览器完全不认识这个符号，会把它当成普通字符串拼到当前页面路径下解析，必然加载失败。

另外你之前写C盘绝对路径能显示，只是因为你本地开发时浏览器在你自己电脑上，能直接读本地磁盘文件，等项目部署到服务器后，所有访问用户的浏览器根本读不到服务器的C盘内容，这个写法完全不能用在正式环境，还会泄露服务器目录结构，有安全隐患。

正确实现步骤 #

• 先整理静态文件位置：把logo.jpg移动到wwwroot目录下，建议新建专门的images文件夹存放图片资源，最终路径为wwwroot/images/logo.jpg，不要把图片混放到js这类存脚本的目录里。
• 确认静态文件中间件已开启：检查你的项目配置代码（.NET 6+看Program.cs，旧版本看Startup.cs），已经添加了静态文件中间件配置，默认生成的项目都会自带这行，要是被误删需要补上：

  app.UseStaticFiles();
  

• 按你写样式的场景选对应路径写法：
  • 如果是在.cshtml Razor视图里写内联样式，需要用Url.Content方法让服务端提前把~/路径解析成浏览器能识别的实际web路径，写法如下：

    <a href="#" class="img logo rounded-circle mb-5" 
       style="background-image: url('@Url.Content("~/images/logo.jpg")')">
    </a>
    

  • 如果是在独立的.css静态样式文件里写样式，CSS不识别~/语法，直接写斜杠开头的应用根相对路径即可：

    .logo {
        background-image: url('/images/logo.jpg');
    }
    

补充：如果你确实要把静态资源放在wwwroot外的其他目录，需要额外在UseStaticFiles里配置自定义文件提供者，但对新手来说不建议这么做，统一把静态资源放到wwwroot下是最稳妥、符合框架约定的做法。

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