你能否在不使用相对路径的情况下从CSS中引用图片?

8

我想创建一个带有背景图像的div,css代码如下:

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

现在,我无法在CSS中使用路由,因此必须使用相对路径,否则如果在非根路径下安装我的应用程序,则会出现错误。是否有解决方法?例如:
background-image:url('@{publicFolder}/images/foo.png');

我找到了一年前的这个帖子,声称这是不可能的。现在还是这样吗?

编辑:我知道我可以在页面中嵌入CSS,但那并不是一个可接受的解决方案,而只是一个变通方法。


1
相对路径有什么问题? - Pekka
@Pekka - 相对路径(如'../images/foo.png')是脆弱的。如果您更改到此页面的路由,它们可能会中断。这甚至可能是外部配置,例如充当反向代理的Apache前端,带有mod-rewrite。 “绝对”路径更加健壮(它是相对于您的应用程序文件夹的“相对”路径,但呈现的页面包含绝对路径)。 - ripper234
3
如果您更改到此页面的路由,它们可能会中断,但如果您有一个单独的样式表,它们就不会中断 - 样式表中的相对路径始终相对于样式表位置,这个位置通常不会经常更改,对吗? - Pekka
4个回答

12

由于Play框架编译/public目录下的所有文件,所以我在CSS中使用了以下语句来访问背景图片。

background: url("/assets/images/my-image-background.jpg");

到目前为止,这对我有用,不确定是否是一个好的做法!希望能够帮到你。祝好。


9

路径始终从您的样式表开始。那么为什么不使用相对路径呢?

例如,您的CSS位于/public/css/,因此在CSS文件中,您的路径必须是../images。就这样。

但是也许less.css有类似您要查找的内容。


谢谢。我一直在想CSS中的路径URL是从索引还是CSS文件开始的。 - heroix

7

有解决方法。

问题在于CSS文件是静态的,因此Play!不会对它们做任何处理 - 除了将它们提供给客户端。

只需将您的CSS文件转换为视图,编写一个通用控制器,以文件名作为参数,它们将被作为Play!模板提供。

大概像这样(注意:伪代码!):

路由:

get /css/{filename}  Application.getCSS

控制器

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

然后在您的css中,您可以使用任何您想要的优美模板功能。 安装路径可用作conf中的http.path

但这样会非常低效,因此您需要添加nginx或类似的前端以进行一些缓存,并为这些文件设置较高的过期值。

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

我确实认为相对路径更适合通用部署,并且使用此动态绝对方法更容易出现问题。

更好的整体部署策略

另一个重要的问题是,如果您喜欢绝对URL,那么没有问题。 我也是。

但当我部署我的Web应用程序(无论是play!、django、纯wsgi还是其他任何东西)时,我总是放置一个Web前端。

通常使用nginx。

这意味着您的play框架将是一个上游服务器,您可以在80端口上使用URL执行所有操作-并使用子域或子文件夹管理多个服务...

但是当您访问play应用程序时,它们自己的端口上的所有内容都是绝对的。

最后,如果您将Play!部署为war文件,我会觉得您选择了错误的框架或错误的部署模式!但是,您的jboss或其他应用程序Web服务器将对子文件夹进行一些魔法...

@ripper234 哈哈,抱歉我是以一种通用的方式来展示所有可能的情况,而不是指你的部署模式! - Stefano
@user1187534 - 你需要一个应用服务器,否则你不需要,因为它并没有带来太多的附加价值,而play已经包含了相同的web服务器。此外,play!2目前在java应用服务器上还不能完全工作。 - Stefano

-2
看一下conf/routes文件。
在其中,你会发现类似以下内容的东西
#将/public文件夹中的静态资源映射到/assets URL路径 GET /assets/*file controllers.Assets.at(path="/public", file)
这意味着为了访问public文件夹中的资源, 您将在url中使用/assets。
所以在您的css中,您可以这样做 url(/assets/images/myimage.png) 然后它就可以工作了。

CSS文件不会被解析,而是以静态方式提供。如果您的应用程序部署在子文件夹中(在application.conf中的“http.path”),则您提出的路径将无法正常工作。 - ripper234
是的,CSS文件是静态提供的。但只要您正确设置routes.conf并在CSS中使用相应的URL,图像就应该能够正确提供。 - iecanfly
这正是我在项目的CSS文件中使用background-image:url('...')的方式。 - iecanfly
据我所知,Assets controller 仅适用于 Play 2.0(而我们正在讨论的是 Play 1.2.*)... - Stefano

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接