提问人：Simon 提问时间：2/4/2010 最后编辑：cdeszaqSimon 更新时间：7/29/2016 访问量：20386
如何在 grails 中引用 CSS 中的图像资源？
How do I refer to an image resource from CSS in grails?
问：
我想在我的主样式表中引用 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 标签，因为我想通过样式来控制图像。
那么，我做错了什么？
答：
12赞
Jared
2/4/2010
#1
尝试添加“../”。例如：
../images/outbound-blue.png
“../“，告诉浏览器向上一级访问父目录，然后查看该目录。目前，您已将其设置为查找在包含样式表的目录中调用的子目录。imagesimages
评论
0赞
Jared
2/4/2010
几乎可以肯定，问题出在路径之外的其他东西上。我的建议是从用grails应用程序创建的默认样式表中获取的。也许你应该重新标记或重新提出这个问题，成为一个更通用的CSS问题？
0赞
Simon
2/4/2010
你是对的，杰瑞德。有些东西正在缓存页面。浏览器中的 CTRL-F5 没有纠正它，我不得不退回 grails 服务器才能显示新的样式表。我怀疑我在发布问题之前就已经修复了它。我不确定何时重新启动圣杯的规则是什么。控制器更改似乎需要它。
0赞
Cassio Landim
1/19/2012
如何使用 Grails 插件中的 css 和图像？
1赞
Colin Harrington
2/4/2010
#2
通常，您会引用样式表中的资源作为相对 URL。图像的 url 应相对于 CSS 文件的位置。所以从将引用../images/outbound-blue.png/appName/css/main.css/appName/images/outbound-blue.png
如果仍有问题，可以使用 firebug 等工具来调试页面并验证样式中的每个步骤。
验证：
- 您认为正在设置样式的项目正在挑选样式。
- 您引用的图像既可以手动访问，也可以通过 firebug 访问。
- 您正在加载的 css 文件不会缓存，实际上会由浏览器刷新。
20赞
Gene Golovchinsky
7/26/2011
#3
指定图像位置的一种更可移植的方法是使用 resource（） 函数：
.messageimg {
height:17px;
width:16px;
background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
background-repeat:no-repeat;
}
评论
0赞
cdeszaq
12/15/2012
这是迄今为止最有用的方法。它还可以让您访问插件，这通常是需要的。
5赞
aroth
12/21/2013
这是在文件内部工作，还是仅在视图/页面中使用内联样式时工作？.css.gsp
4赞
Yu Jiaao
2/9/2017
它只在文件内起作用，不能在文件@aroth.gsp.css
4赞
stenix
3/21/2013
#4
不过要注意。Using 在引用的 .css 文件中不起作用。您需要添加一个元素。$resource{...style
评论
1赞
netmikey
8/2/2013
有一种方法可以通过 Grails 的模板引擎传递一个“独立”的 CSS 文件，而对应用程序的影响却出奇地小，请查看这篇文章： wthr.us/2010/02/16/preprocessing-css-in-grails - 对我来说是完美的解决方案:)
0赞
Nikhil Sharma
4/16/2016
#5
所以问题似乎是浏览器正在调查
http://localhost:8080/<app-name>/assets/images/<background-image-name>
这似乎是正确的，但如果您检查页面上的其他图像，它们会从路径呈现
http://localhost:8080/<app-name>/assets/background-image-name
因此，只需在路径名中排除图像即可解决问题。但是，这只是一个解决方法，我相信会有更好的解释和解决方案。干杯。
评论