Razor Page中background-image: url(~/images/slide.jpg)无法加载图片的原因？

核心原因 #

Razor 框架只会解析HTML元素的服务器端属性（比如<img>的src）中的~路径符号，将其转换为正确的根相对路径。但内联style属性里的url(~/images/slide.jpg)属于客户端CSS内容，Razor不会对其中的~进行路径转换，浏览器会直接请求带~的路径，自然找不到图片资源。

解决方法 #

• 用Razor表达式生成路径：通过@Url.Content()方法解析~路径，让Razor输出正确的URL：

  <div class="item-slick1 item1-slick1" style="background-image: url('@Url.Content("~/images/slide.jpg")');">
  

  或者在ASP.NET Core中也可以用@()直接解析：

  <div class="item-slick1 item1-slick1" style="background-image: url('@("~/images/slide.jpg")');">
  

• 使用根相对路径：直接写/images/slide.jpg（开头的/表示网站根目录），这种方式无需依赖Razor解析，浏览器能直接识别根路径。

• 移至外部CSS文件：把背景图片样式写到wwwroot下的CSS文件中，此时使用相对于CSS文件的路径即可。比如CSS文件在wwwroot/css/，路径就写../images/slide.jpg，因为CSS的相对路径是基于自身文件位置的。

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