ImageResources vs ImageResources.getSafeUri

[tong123123]

I find if using
Image image1 = New Image(ImageResources);
image1.setSize("200px", "180px");

the image cannot shrink to fit the image1 widget, but only a portion
of the image is shown.

if using
Image image1 = New Image(ImageResources.getSafeUri());
image1.setSize("200px", "180px");

the image can shrink to fit the size of image1 widget.

why there is so different?

[Thomas Broyer]

An ImageResource can be generated in many ways: a data: URI, a "css sprite" (one big image with all ImageResource), a simple reference to the image URL on the server, etc.

new Image(ImageResource) doesn't know which implementation is used (and it shouldn't have to!) so in this case it always sets the image to a transparent GIF and displays the image as a CSS background, adjusting the background position and the image dimensions so that only the part of a "CSS sprite" image (if that's what's being used) is shown.

If you getSafeUri(), then it won't work when the "CSS sprite" technique is used, which is the case by default in IE6 and IE7 (all others should use a data: URI, and IE8 has a fallback to a simple URL in case it's loaded over HTTPS to prevent a mixed-content warning)