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

尝试在URI的开头添加“../”。例如:

../images/outbound-blue.png

URI开头的“..”告诉浏览器向上一级到父目录,然后在 images 目录。目前您已将其设置为查找名为 图像 在包含样式表的目录中。

指定图像位置的更可移植的方法是使用resource()函数:

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

不过要注意。使用 $resource{... 在引用的.css文件中不起作用。您需要添加 style 元素。

通常,您会将样式表中的资源作为相对URL引用。图像的URL应该相对于CSS文件的位置。所以 ../images/outbound-blue.png 从 /appName/css/main.css 将引用 /appName/images/outbound-blue.png

如果仍有问题,可以使用Firebug之类的工具来检查页面并验证样式中的每个步骤,从而调试此问题。
确认:

• 您认为正在设计的项目正在选择样式。
• 您正在引用的图像既可以手动访问,也可以通过Firebug访问。
• 您正在加载的CSS文件没有缓存,而是由浏览器刷新。

所以问题似乎是浏览器正在调查

http://localhost:8080/<app-name>/assets/images/<background-image-name>

这似乎是正确的,但是如果检查页面上的其他图像,它们将从路径呈现

http://localhost:8080/<app-name>/assets/background-image-name 

所以,只要排除路径名中的图像,就可以解决这个问题。然而,这只是一个工作,我相信这将有一个更好的解释和解决方案。干杯。