与 gwt Uibinder 一起使用带有背景图像集的 css答案

【问题标题】：Using with gwt Uibinder a css with background-image set与 gwt Uibinder 一起使用带有背景图像集的 css
【发布时间】：2015-06-16 15:11:26
【问题描述】：

我有一个扩展 ClientBundle 并定义 CssResource 的类。我想在模板 Uibinder 中使用它作为面板的 css 属性（这将是背景。但在运行期间图像不显示。按照代码：

Image.css：

 .backgroundPage {
    background-image: url("../resources/Universe-Big-Planet.jpg");
    background-repeat:no-repeat;
/*     background-color: red; */
}

BundleResouces.java：

public interface BundleResources extends ClientBundle {

    public final BundleResources IMPL= (BundleResources) GWT.create(BundleResources.class);

    @Source("../resources/Universe-Big-Planet.jpg")
    ImageResource universeBigPlanet();

    @Source("../resources/Wood_blue.jpg")
    ImageResource woodBlue();

    @Source("Images.css")
    MyStyle mystyle();

    public interface MyStyle extends CssResource{
        String backgroundPage();
    }
}

Home.ui.xml（模板）：

<ui:with field='res' type='it.myproject.movieuniverse.client.bundle.BundleResources'/> 
.............................
</ui:style>
    <g:DockLayoutPanel ui:field="background" unit="PX" styleName="{res.mystyle.backgroundPage}">

Home.java：

public Home() {
    initWidget(uiBinder.createAndBindUi(this));
            Window.addResizeHandler(resizeHandler);
            resizeWidget();
            BundleResources.IMPL.mystyle().ensureInjected();
        }

如果我尝试使用 background-color: red 它可以工作，因此 css 被正确指向。不知道怎么解决，谢谢！

【问题讨论】：

您确定背景图片可以通过指定路径访问吗？
我看到您在资源类和样式中有一个图像。如果要使用界面中指定的图片，则必须在代码中直接使用IMPL设置图片。
如果您从不使用 ImageResources 在您的 ClientBundle 中有什么意义？

标签： css image gwt uibinder cssresource

【解决方案1】：

如果您的浏览器尝试加载此图像，请检查它。很可能是路径错误。

路径应该是服务器上可公开访问的图像，而不是像使用 ImageResource 时那样在您的开发环境中。

在您的代码中，您根本没有使用 ImageResource。如果您打算使用它，则无需在 CSS 中指定路径。

【讨论】：