如何在Grails中引用CSS中的图像资源？

Question

我想在我的主样式表中引用Grails应用程序中的图像,但我无法使其工作.我的图片位于我的Grails应用程序的标准位置...

project\web-app\images\outbound-blue.png

在我的样式表中,我想将它用作类的背景图像......

.messageimg {
    height:17px;
    width:16px;
    background-image:url(images/outbound-blue.png);
    background-repeat:no-repeat;
}

由于某种原因,这不起作用.我的样式表也在正常位置,即

project\web-app\css\main.css

当我在浏览器中加载页面时,我得到一个丢失的图像标记.我已经检查过我在名字等方面没有拼写错误.我也尝试在网址中摆弄虚拟路径,但是我无法弄清楚我需要在Grails中使用什么才能完成这项工作.

我不想使用GSP并在我的代码中插入IMG标记,因为我想通过样式控制图像.

那么,我做错了什么？

Answer 1

指定图像位置的更便携方式是使用resource()函数:

.messageimg {
    height:17px;
    width:16px;
    background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
    background-repeat:no-repeat;
}

Answer 2

尝试在URI的开头添加"../".例如:

../images/outbound-blue.png

URI开头的"../"告诉浏览器上一级到父目录然后查看images目录.目前,您已将其设置为查找images包含样式表的目录中调用的子目录.