Bootstrap卡片内设置的background-img无法正常显示问题求助

你遇到的故障核心是Razor页面的行内样式无法自动解析~路径占位符：
~是ASP.NET Core提供的应用根路径占位符，仅会在Razor标签的指定属性（如<img>的src、<a>的href）中被自动转换为实际的站点根路径，写在style属性的background-image:url()中时不会被解析，浏览器会将~作为路径的一部分发起请求，最终导致图片找不到。
你提到同路径放在<img>标签中可正常加载，恰好印证了该问题：<img>的src属性会触发Razor的路径解析逻辑，行内样式不会。

你可以任选以下一种方式修复：

• 若你的站点部署在域名根目录下，直接将路径中的~删除，使用站点绝对路径即可：

  <div class="card-img" style="background-image:url('/images/StrawberryVanillaSoftCream2110111446.jpg');"></div>
  

• 若你的站点部署在子目录下，使用Razor提供的Url.Content()方法主动解析根路径：

  <div class="card-img" style="background-image:url('@Url.Content("~/images/StrawberryVanillaSoftCream2110111446.jpg")');"></div>
  

你可以打开浏览器开发者工具的「网络」面板，对比background-image发起的图片请求地址，和正常加载的<img>标签的图片请求地址，就能直接看到路径差异。

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