在 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

我也有类似的问题。由于 MVC 允许使用 ~/（例如在 razor 视图中）来表示应用程序根，我想知道是否应该对我的 CSS 文件中的图像路径这样做。

当然，因为 CSS 文件不是在服务器端处理的，所以这是行不通的。但是我认为正确的方法是使用相对路径。这应该没问题，因为 CSS 文件的路径（例如在布局中）可以使用 ~/ ，然后从 CSS 文件到图像的路径将被固定；并且应用程序根在哪里都没有关系......或者布局或主视图是否在不同的区域中。

Answer 2

如果您的应用程序始终位于网站的根文件夹中（或者至少您的图像都将位于根文件夹中），那么您的第一个选项非常好。如果您在不同情况下可能有不同的路径（例如在开发或测试中拥有一个共享站点），那么这是行不通的。

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

Answer 3

我一般都是这样的……

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 都与 root 相关，这让我可以将我的程序放到任何文件夹中并轻松运行它。