在asp.net.mvc中,在css中引用图像的正确方法是什么

Question

我正在审查一个网站,我看到很多不同的约定,审查如何在asp.net-mvc网站上的CSS引用图像.

包含:

1. 完整路径:

   .ddTitle span.arrow {
       background: url('/content/images/dd_arrow.gif') no-repeat 0 0;
   }
   

2. 与css所在位置相对的位置:

   #cluetip-waitimage {
       background-image: url(jQueryUI/images/ui-anim_basic_16x16.gif);  
   }
   

3. 相对于"......"

   #cluetip-waitimage {
       background-image: url(../../jQueryUI/images/ui-anim_basic_16x16.gif);  
   }
   

在asp.net-mvc中,有路由等..一个是正确的,另一个是错的还是这只是偏好或惯例？假设此站点可能与其他站点位于共享环境中.

Answer 1

如果您的应用程序始终位于网站的根文件夹中（或者至少图像都位于该根文件夹中），则第一种选择就很好。如果您在不同情况下可能有不同的路径（例如在开发或测试中拥有一个共享站点），则此方法不起作用。

第二和第三个选项基本上是相同的。使用哪一个完全取决于图像相对于CSS文件的位置。我个人认为第二个看起来更干净，因此我尝试将CS​​S文件引用的所有图像放在相对于CSS所在的文件夹结构中。但是，有些人更喜欢将所有图像都放在一个位置（甚至将内容图像与站点“ chrome”图像混合在一起），因此可能需要使用相对路径../来实现此目的。

Answer 2

我一般都是这样做的...

background-image: url('/jQuery/images/ui-anim_basic_16x16.gif');

开头/表示根文件夹，因此所有路径都可以相对于程序的根目录，而不是相对于页面运行的文件夹。这增加了一些输入，但它消除了父哈希的许多问题。

所以如果你的图像是这样的......

• 解决方案
  • 控制器
  • 内容
    • jQuery
      • 图片

你的路径将是background-image: url('/content/jquery/images/ui-anim_basic_16x16.gif');

这样做可以消除任何类型路径的大部分影响。因为 ASP.NET 作为一种语言理解相对 url 的概念，所以这应该适用于几乎任何情况，除非您托管它的服务器有一些非常尴尬的配置 - 在这种情况下，标准和实践也不会帮助您远的。

根据我的经验，根相对 URL 还可以使您的应用程序更加模块化。这里可能有更有经验的程序员可以用理由反驳这一点，但从我构建的所有内容来看，使我的所有图像 url 相对于根目录允许我将程序放入任何文件夹并运行它，而不复杂。