如何在背景图片URL中设置应用路径？图片加载失败原因解析

核心原因 #

~/ 这种根路径标记是服务器端框架（比如ASP.NET）提供的语法，它只会自动解析HTML原生元素的特定属性（比如<img>的src、<a>的href），把~/替换成当前应用的根路径。但内联style属性里的background: url(~/xxx)属于CSS内容，服务器不会对CSS字符串里的~/做解析，浏览器拿到的就是原始的~/images/camels1.jpg，自然找不到资源。

解决办法 #

• 用服务器端代码生成完整的背景图路径，把解析后的路径注入到style里：

  <div class="bg" style="background: url('@Url.Content("~/images/camels1.jpg")')"></div>
  

  （ASP.NET Razor环境下可用，其他框架类似，找对应的路径解析方法）

• 把背景样式移到外部CSS文件，用相对路径（相对于CSS文件的位置）或者绝对路径：
  如果CSS文件在/css/style.css，图片在/images/camels1.jpg，可以写：

  .bg {
      background: url('../images/camels1.jpg');
  }
  

• 在页面的<style>块里用服务器端变量注入路径：

  <style>
  .bg {
      background-image: url('@Url.Content("~/images/camels1.jpg")');
  }
  </style>
  

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