Where to place an image to be loaded in custom GWT widget

Vaadin 6 / 7 / 8
1

I am using MyComponentWidget example described in “Creating a simple component” in Vaadin 7 wiki to create custom GWT widget. In the widget, I need to load an image using Image image = new Image(url); where Image is com.google.gwt.user.client.ui.Image;

In what project directory the image should be located and what should be its URL?

Thanks for your help.

2

At least two options.

  1. Put image resources in public folder or a sub-folder of public folder. The public folder should be at the same level of folder hierarchy where your *.gwt.xml file is. Then you can get the image url with GWT.getModuleBaseURL() + “yourfolder/yourimage.png”.

  2. More GWT way is to use ClientBundle. You can read about the advantages of using ClientBundles in
    https://developers.google.com/web-toolkit/doc/latest/DevGuideUiImageBundles
    . Basically you create a java package e.g. com.example.mycomponent.client.resources and put your image files there. Then in the same package you create an interface:

public interface MyResources extends ClientBundle {

    public static final MyResources INSTANCE = GWT
            .create(MyResources .class);

    @Source("icon.png")
    public ImageResource myIcon();
}

Then you can create an Image img = new Image(MyResources.INSTANCE.myIcon()).

Remember to define in your .gwt.xml

3

I want to fetch an image from a remote server (not my

imaging app

's server, but I don’t think that matters) and

display image

 in an existing Image widget. Don’t know whether these work for me, but I’d like to try as you said. Thanks.