如何在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标签，因为我想通过样式控制图像。

那么，我做错了什么？

解决方案

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

  ../ images / outbound-blue.png 
  pre> 
 
 
在URI开头的../告诉浏览器上一层级到父目录，然后查看 images 目录。目前您已设置为在包含样式表的目录中查找名为 images 的子目录。
 
I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work.  My image lives in the standard location in my Grails app...
project\web-app\images\outbound-blue.png
In my stylesheet I want to use it as a background image for a class...
.messageimg {
    height:17px;
    width:16px;
    background-image:url(images/outbound-blue.png);
    background-repeat:no-repeat;
}
This doesn't work for some reason.  My stylesheet is in the normal location too, i.e. 
project\web-app\css\main.css
I get a missing image marker when I load the page in the browser.  I have checked that I have no typos in names etc.  I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.

I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.

So, what am I doing wrong?
解决方案
Try adding "../" at the beginning of the URI. For example:
../images/outbound-blue.png
The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the images directory. Currently you have it set up to look for a subdirectory called images in the directory containing stylesheets.

                        
这篇关于如何在grails中从CSS引用图像资源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！