jquery - GWT ClientBundle CSS 不使用相对路径来引用图像

Question

我是 Google Web Toolkit 的新手，正在尝试将 ClientBundle 与 jquery-ui 结合使用。我的元素结构如下所示:

我定义了一个这样的资源接口(interface):

我像这样注入(inject)jquery和css:

现在，CSS 和 JQuery 脚本就可以正常注入(inject)了。但是，当我启动应用程序时，CSS 中的路径被误解。例如以下 css 行:

background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;

失败。示例如下:

正如您所看到的，GWT 似乎以某种方式假设图像文件夹是顶级文件夹，但显然这不是我想要的。图像应该简单地放置在/war 下还是我也必须将它们包含在客户端包中？或者发生了什么。

Answer 1

1*按照说明使用 spriting here

在 my.css 文件中使用 @sprite 和 gwt-image

@sprite .myImage {
  gwt-image: 'image';
}

并使用 bundle 将它们注入(inject)您的应用程序

interface MyResources extends ClientBundle {
  @Source("image.png")
  ImageResource image();

  @Source("my.css");
  CssResource css();
}

它不会让你注入(inject) jQuery Css。

2*第二种选择是编写一个小 servlet，为您的图像提供“直接 url 访问”，这样您就可以保持 CSS 不变。

这是我编写的使用 Spring MVC 获取 CSS(不是图像)的内容。这应该足以说明问题了。我正在使用 Spring 的 DispatcherServlet。

  private static final String CSS_PATH = "/path/to/my/css/resources/";
  private static final String CSS_EXT = ".css";
  private static final String CSS_CONTENT_TYPE = "text/css";

  @RequestMapping(value = "/resources/css", method = RequestMethod.GET)
  public void getCssResource(HttpServletResponse response, @RequestParam("name") String name) throws IOException {
    String path = CSS_PATH + name;
    InputStream is = SomeClassOnMyClassPath.class.getResourceAsStream(path + CSS_EXT);
    if (is != null) {
      flushResource(response, is, CSS_CONTENT_TYPE);
    }
  }

  private void flushResource(HttpServletResponse response, InputStream is, String contentType) throws IOException {
    DateTime expirationTime = new DateTime().plusDays(16);
    response.setContentType(contentType);
    response.setDateHeader("Expires", expirationTime.getMillis());
    IOUtils.copy(is, response.getOutputStream());
    response.flushBuffer();
  }

然后您可以在/resources/css?name=cssName url 获取 CSS