Question

I have used this code (kind of tutorial) at http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5 … In this code, I used the “Image Scale / Resize” code and I found something that I cannot explain. I mean, instead of using :

final Image img = new Image("/img/test.jpg");

I have used the client bundle and so the following code:

final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1());

And I do not have any error, but the image did not appears. Finally I found the solution with :

final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1().getSafeUri());

Do you know the reason why “.getSafeUri()” solves the problem ?

Answer 1

See ImageResource in ClientBundle as real <img> element

An Image created with an ImageResource will unconditionally use a clipped image, where the image is set as a CSS background image (and the <img>‘s src is a 1×1px transparent GIF). Because the image actually is a blank GIF, painting it to the canvas does nothing noticeable; canvas does not take CSS styles into account.

Using getSafeUri() you’ll have the data: URL of the image, which will be used as the src of the <img>. No blank.gif here, so the image is correctly painted on the canvas.

Note however that getSafeUri() won’t work in IE6 and IE7 by default. If you need to support them, you’ll have to annotate your ImageResources with either @ImageOptions(preventInlining = true) or @ImageOptions(repeatStyle = RepeatStyle.Both). Alternately, you could use DataResources instead of ImageResources.