你可以从css引用图像而不使用相对路径？ [英] Can you reference images from css without using relative paths?

问题描述

我想要创建一个带有背景图片css的div：

  #mydiv {
 background- image：url（'/ public / images / foo.png'）; 
 background-repeat：repeat-x; 
} 
  

现在，我不能在css中使用路由，必须使用相对路径，否则我的应用程序会破坏，如果安装在非根路径。

有办法解决这个问题吗？像

  background-image：url（'@ {publicFolder} /images/foo.png'）; 
  

我发现这个线程从一年前，声称它是不可能的。这是否仍然是这样？

编辑：我知道我可以在页面中嵌入CSS，这不是一个可以接受的解决方案，一个工作。

解决方案

方法/是/可能。

问题是CSS文件是静态的，所以Play！

只需将css文件转换为视图，编写一个以文件名作为参数的通用控制器，将被作为Play！

ROUTE：

。

  get / css / {filename} Application.getCSS 
  

CONTROLLER

  class public void getCSS（filename）
 {
 renderTemplate（filename）; 
} 
  

然后在你的css中，你可以使用任何你想要的groovy模板功能。
安装路径可作为 conf.conf中的http.path 使用

这将是非常低效的，所以你必须添加nginx或类似的前端做一些缓存，并为这些文件设置高过期值。

我不确定是否值得这样做只是为了避免相对路径

！

更好的整体部署策略

b

另一个重要的一点是，如果你喜欢绝对URL，没有问题。

但是当我部署我的web应用程序（无论是玩，！django，纯wsgi，或其他任何东西） web前端。

通常是nginx。

这意味着你的游戏框架将是一个上游服务器，可以使用您的：80端口上的URL来完成您想要的一切 - 并且管理具有子域或子文件夹的多个服务...

但是当您自己访问您的播放应用程序端口一切都将是绝对的。

最后，如果你正在部署Play！作为一个战争，我会有你选择错误的框架或错误的部署模式的感觉！但是，你的jboss或任何其他应用程序的webserver将做一些神奇的子文件夹...

I'd like to create a div with a background image css:

#mydiv {
  background-image:url('/public/images/foo.png');
  background-repeat: repeat-x;
}

Now, I can't use routes in css, so as a result I have to use a relative path, or my app will break if installed at a non-root path.

Is there a way around this? Something like

background-image:url('@{publicFolder}/images/foo.png');

I did find this thread from a year ago that claims it's impossible. Is this still the case?

Edit: I know I can inline the css in the page, that's not really an acceptable solution, but rather a work around.

解决方案

The way around /is/ possible.

The problem is that CSS files are static, so Play! does not do anything on them - except serving them to the clients.

Just make your css files into views, write a generic controller that takes the filename as a parameter and they will be served as Play! Templates.

something in the lines of (beware: PSEUDOCODE!):

ROUTE:

get /css/{filename}  Application.getCSS

CONTROLLER

class public void getCSS(filename)
{
     renderTemplate(filename);
}

Then in your css you can use any groovy template feature you want. The installation path is available as http.path in the conf

This will be very inefficient though, so you will have to add nginx or similar frontend to do some caching and set high expiration values for those files.

I'm not sure if it's worth doing it just to avoid relative paths!

I definitely think that the relative path is better suited generic deployment, and you are more likely to break things with this dynamic absolute approach.

A better overall deployment strategy

Anothe important point is that if you do like absolute URLs, there's no problem. I actually do too.

But when I deploy my web applications (be them play!, django, pure wsgi, or whatever else) I always put a web frontend.

Usually nginx.

This means that your play framework will be an upstream server, and you can do everything you want with the URLs on your :80 port - and manage several services with subdomains or subfolders...

but when you access your play application on its own port(s) everything will be absolute.

Finally, if you were deploying Play! as a war I would have the feeling you have chosen the wrong framework or the wrong deployment pattern! But then your jboss or whatever other application webserver will do some magic on the subfolders...

这篇关于你可以从css引用图像而不使用相对路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！