为开发和生产环境配置 CSS 中的图像路径

Posted 2023-02-22

【中文标题】为开发和生产环境配置 CSS 中的图像路径

【英文标题】：Configure path to images in CSS for dev and production environments

【发布时间】：2011-03-16 09:43:10

【问题描述】：

我目前正在开发一个网站，并且我的本地环境托管在带有 IIS 5.1 的 XP 机器上。我正在使用 ASP MVC2 和 .NET Framework 4.0。

我想知道的是，如果有一种方法可以在 web.config（或任何其他方式）中“配置”我所有图像的路径，以便当我的 CSS 使用 url() 时它会自动知道在哪里寻找.

这背后的主要原因是我们有很多图像和文档，我们不想将它们存储在源代码管理中，因为将它们存储在其中并不重要，因为它与我们的内容编写者发生了很大变化。

为他们提供一个开发和生产空间来编辑、审查和部署他们自己的文档也对生产力有很大的好处，我希望尽可能保持这种状态，因为我们有一个机制来验证链接中的所有文件我们的网站是有效的。

例如，在我的开发盒上，我想使用“http://static.devserver/Images/...”，但在部署时，我希望他们使用“http://static.productionserver/Images/...”

显然，考虑到我的上述要求，在这种情况下将 CSS 托管在静态子域上是行不通的，或者我可能遗漏了什么？

有人告诉我要使用 mod_rewrite 和/或 htaccess，但我没有很好地记录在这方面，而且在我现在交付这个项目的时间里似乎相当复杂。

总而言之，我希望你们在场分享您的想法和建议，让我可以按照我上面描述的方式完成这项工作。

非常感谢您的阅读！

【参考方案1】：

没有简单的解决方案可以完全按照您的意愿行事。 您可能必须将 .css 文件输出为动态页面，在每个 URL 之前替换配置中的字符串（在 CSS 中。

您真的需要子域吗？为什么不使用子文件夹？ url('/css/yourcss.css') 对开发和生产都是通用的。

（好吧，我知道来自 cookie 的额外流量存在问题，但是，这仍然更容易做到）

【讨论】：

我的问题是，我不希望内容成为主机应用程序的一部分。内容“应该”托管在它自己的域上：对于开发：应用程序 => www.MyApp.dev（位于服务器 A）内容 => www.static.MyApp.dev（位于服务器 B）对于生产：应用程序 => www.MyApp.com（驻留在服务器 C）内容 => www.static.MyApp.com（驻留在服务器 D）也许我把一切都复杂化了，但这些是我得到的要求......跨度>

【参考方案2】：

BarMonster 的相对路径是要走的路。网址（'/subfolder/yourfile.ext'）。这是制作图像的最佳方式，并且网站内的大多数链接都能够在测试和实际环境之间进行转换。

【讨论】：

是的，我明白这一点，但是，如果内容在 CSS 文件所在的同一物理位置提供服务...我的要求是必须将网站部署到网络服务器 A但内容驻留在托管静态内容的 Web 服务器上的服务器 B 上。现在唯一的方法是在服务器 B 上托管 CSS 文件，以便图像或任何其他内容与 css 文件相关，但这不是解决方案，因为我必须单独部署我的 css 文件并将它们移出该项目也会给源代码管理带来一些痛苦......

【参考方案3】：

非常感谢帮助我的人！ 我终于在 url 重写中再次挖掘以找到解决我的问题的方法！ 我需要“重定向”而不是“重写”网址！

现在它按预期工作了！

我正在使用 Intelligencia 的 URL Rewriter 和这个简单的规则：

<rewriter>
        <redirect url="^.+\.(?:jpg|bmp|png|gif)$" to="http://myDEVserver$0" processing="stop" />
</rewriter>

【讨论】：

很抱歉让您失望了，但这很糟糕 :-) 对任何静态文件的每个请求都会在您的应用服务器上引起额外的请求。这是相当缓慢的。唯一正确的解决方案是将最终 URL 放在 CSS 文件中。这可以动态完成，也可以使用一些模板工具静态完成。

那么，你有什么动态或静态的指针吗？

【参考方案4】：

我意识到这个问题很久以前就冷了，但这是我在谷歌搜索的第一个结果，所以我想我会尝试一下，以防它帮助其他人。

我对这个问题的解决方案是将我的 CSS 文件中包含 url() 语句的所有规则移动到我的视图中。

我在 MVC 3 中使用 Razor，所以我在我的基本布局文件中包含了一个样式部分，并将所有麻烦的 url 规则都放在那里。然后我可以使用 MVC 引擎在运行时确定合适的 url。您也可以对其进行修改以动态查看不同的域。

<style type="text/css">
    .back
    
        background: url(@Url.Content("~/Content/icons/gray/back.png")) no-repeat;
    
    .link
    
        background: url(@Url.Content("~/Content/icons/gray/link.png")) no-repeat;
    
</style>

语法适用于 Razor 引擎，但对于 MVC 2，您可以在 MasterPage 中执行相同的操作。