Question

I have a GWT view with an image dropped into the view as a DataResource (to set the img src equal to the base64 image path instead of the default setting css background to the ) like so:

Image img = new Image(ICONS.red().getUrl());
img.setStyleName("myImgStyle");
panel.add( img );

My ICONS resource bundle looks like:

@Source("red.png")
DataResource red();

This generates the following html in the generated document (src truncated):

<img src="<base64 encoded path>" class="myImgStyle" style="width: 16px; height: 16px;">

My issue is with the inline styling in the img tag. I’m declaring style for .myImgStyle in the attached CSS file in several different @media sections so I can size the image for different devices. However, the inline styling in the img tag overrides the style defined in the CSS. I’ve tried setting styleName and setting style primary name in the GWT source to no avail. How can I render the img tag without the inline style in the img tag?

Answer 1

You can explicitly remove the height and width from the Image by accessing its Style:

img.getElement().getStyle().clearHeight();
img.getElement().getStyle().clearWidth();