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

我想在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

当我在浏览器中加载页面时，我得到一个丢失的图像标记。我已经检查过我的名字等没有输入错误。我也尝试过摆弄url中的虚拟路径，但我不知道我需要在其中添加什么才能在Grails中工作

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

那么，我做错了什么呢？

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

../images/outbound-blue.png

---

URI开头的“./”告诉浏览器向上一级进入父目录，然后查看

图像

目录。目前，您已将其设置为在包含样式表的目录中查找名为

images

的子目录。

通常，您会引用样式表中的资源作为相对url。图像的url应该与CSS文件的位置相对。因此，来自

/appName/css/main.css

的

。/images/outbound blue.png

将引用

/appName/images/outbound blue.png

如果仍然存在问题，可以使用firebug之类的工具来检查页面并验证样式中的每个步骤，从而对此进行调试。
核实：

• 您认为正在设计样式的项目正在选择样式
• 您正在引用的图像既可以手动访问，也可以通过firebug访问
• 您正在加载的css文件不是缓存的，实际上是由浏览器刷新的

---

指定图像位置的更方便的方法是使用resource（）函数：

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

---

不过要注意。使用

$resource{…

在引用的.css文件中不起作用。您需要添加

样式

元素。

因此，问题似乎是浏览器正在查看

http://localhost:8080//assets/images/

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

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

http://localhost:8080//assets/background-图像名称

---

因此，仅通过在路径名中排除图像就可以解决此问题。但是，我相信这只是一项工作，我相信会有更好的解释和解决方案。干杯。

我在使用下面描述的解决方案时没有遇到任何问题。更改后，您确定浏览器没有缓存以前的样式，只是没有更新吗？W当您使用Firebug之类的工具来检查希望应用背景的元素时，会发生什么情况？此外，我注意到您在最初的示例中提到了“outbound blue”，在尝试Jared的建议后更新的示例中提到了“inbound blue”。输入错误？只是试图找到可能导致遗漏的小东西ing background.：）也有同样的问题。这不起作用的原因是您忘记了url中的引号。编写背景图像：url（'images/outbound blue.png'））；问题几乎肯定出在路径之外的其他方面。我的建议来自grails应用程序创建的默认样式表。也许你应该重新标记或重新问这个问题，使之成为一个更一般的CSS问题？你说得对，Jared。有东西在缓存页面。浏览器中的CTRL-F5没有纠正它，我不得不跳转重新启动grails服务器以显示新的样式表。我怀疑我在发布问题之前已经修复了它。我不确定何时重新启动grails的规则是什么。控制器更改似乎需要它。如何使用grails插件中的css和图像？这是迄今为止最有用的方法。它还可以让您访问插件，而ch可能更经常需要。它在

.css

文件中工作，还是只在view/

.gsp

页面中使用内联样式时工作？它只在

.gsp

文件中工作，而不是

.css

文件@aroth有一种传递“独立”的方法CSS文件通过Grails的模板引擎生成，对应用程序的影响非常小，请查看本文：-对我来说是完美的解决方案：）