CSS / JS中的动态网址 [英] Dynamic URLs in CSS/JS

问题描述

我拆分了一个较大的应用程序，并引入了一个cdn网址来容纳CSS，javascript和图片等常见对象，以避免重复。我需要做的是，我们的开发环境有不同的URL，所以我可能有：

I'm splitting up one of my larger apps and introducing a 'cdn' url to house common objects like CSS, javascript, and images to avoid duplication. What I need to do, though, is have separate URLs for our dev environments, so I may have:

http://cdn-dev.example.com
http://cdn-qua.example.com
http://cdn.example.com

取决于我们正在使用的环境。我可以得到这个工作对我们的PHP代码生成的东西，但我的损失。 css和.js文件。例如，我如何做类似的：

depending on what environment we're working in. I can get this to work for things that are generated by our PHP code, but I'm at a loss for the .css and .js files that will be called. For example, how do I make something like:

.cool-button { background-image: url('http://cdn.example.com/images/button.png'); }

在不同的网域之间切换？

switch between the different domains?

因此，每个人都清楚， CDN地址是与网站不同的域。因此，开发网站可能是 http://www-dev.domain.com ，它会使用< a href =http://cdn-dev.domain.com =nofollow noreferrer> http://cdn-dev.domain.com

Just so everyone is clear, the CDN address is a different domain that the site. So, the dev site might be http://www-dev.domain.com which would use http://cdn-dev.domain.com

推荐答案

使用相对路径，而不是绝对路径。

Use relative paths, not absolute paths. When inside a CSS file, the path is relative to the CSS file and not the HTML page.

如果您的CSS文件位于此处

If your CSS file is here

http://cdn.example.com/css/style.css

您的课程是

.cool-button { background-image: url('../images/button.png'); }

然后浏览器将尝试从

http://cdn.example.com/images/button.png

这篇关于CSS / JS中的动态网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！