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的子目录。

Answer 3

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

Answer 4

通常，您会将样式表中的资源引用为相对URL。图像的网址应该与CSS文件的位置相关。因此，来自../images/outbound-blue.png的{{1}}将引用/appName/css/main.css

如果您仍然遇到问题，可以使用firebug等工具对其进行调试，以检查页面并验证样式中的每个步骤。
验证：

您认为正在设置样式的项目正在拾取样式。
您可以手动访问您引用的图像，也可以通过firebug访问。
您正在加载的css文件未缓存，并且实际上已被浏览器刷新。

Answer 5

所以问题似乎是浏览器正在研究

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

这似乎是正确的，但如果您检查页面上的其他图像，则会从路径

进行渲染

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

因此，只需在路径名中排除图片即可解决问题。然而，这只是一项工作，我相信它会有更好的解释和解决方案。欢呼声。

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

5 个答案: