Using ClientBundle image resource in pure HTML element in UIBinder

Question

Based on the following resources:

http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html

Use ClientBundle image as background-image

I have successfully implemented a GWT <g:Image> image resource in a UIBinder template:

<ui:with field='res' type='com._.client.resources.Resources'></ui:with>
<g:Image resource="{res.menuLogo}" altText="" styleName="{style.menuLogo}"/>

However, I am trying to add an image as a child element of a <g:MenuItem>, which in GWT can only have pure HTML elements as children:

<g:MenuItem>
    <img id="revealIcon" src="images/trianglebuttonWHITE-DOWN.png" width="11"/>
</g:MenuItem>

The image is for a small widget that will change when the sub-menu is active.

My goal is to handle all resources through a ClientBundle and avoid having any in the WAR directory.

Can I reference a ClientBundle resource for a pure HTML <img> image?

Should I do this programmatically and/or with CSS Image Sprites instead?

Thomas Broyer Thomas Broyer · Accepted Answer · 2014-07-17T09:51:46

<img id="revealIcon" src="{res.menuLogo.getSafeUri}" width="11"/>

Note that, to be safe, you should use a DataResource rather than an ImageResource because, technically, an ImageResource can be bundled with other images and only represent one region of a bigger "sprited" image (in that case, the ImageResource will be an instance of ImageResourcePrototype.Bundle, but it's not possible to check it within UiBinder).

Using ClientBundle image resource in pure HTML element in UIBinder

1 Answers