Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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 ?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.
{"cc_re__cc_re__cc_by_sa_3_0": ["sites in the Stack Exchange network\">Area 51</a></li>\r\n                        <li><a href=\"//careers.stackoverflow.com?utm_source=stackoverflow.com&amp;utm_medium=site-ui&amp;utm_campaign=footerlink\">Stack Overflow Careers</a></li>\r\n                    \r\n                </ol>\r\n            </td>\r\n    </tr>\r\n</table>\r\n                </div>\r\n            </div>\r\n\r\n            <div id=\"copyright\">\r\n                site design / logo &#169; 2014 stack exchange inc; user contributions licensed under <a href=\"http://creativecommons.org/licenses/by-sa/3.0/\" rel=\"license\">cc by-sa 3.0</a>                   with <a href=\"http://blog.stackoverflow.com/2009/06/attribution-required/\" rel=\"license\">attribution required</a>\r\n            </div>\r\n            <div id=\"svnrev\">\r\n                rev 2014.12.24.2140\r\n            </div>\r\n            \r\n        </div>\r\n    </div>\r\n    <noscript>\r\n        <div id=\"noscript-warning\">Stack Overflow works best with JavaScript enabled<img src=\"http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif\" alt=\"\" class=\"dno\"></div>\r\n    </no"], "copyright__copyright__copyright": ["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.\n\nshare|improve this answer\n\nYour Answer\n\n\u00a0\ndiscard\n\nBy posting your answer, you agree to the privacy policy and terms of service.\n\nNot the answer you're looking for? Browse other questions tagged or ask your own question."]}