GWT, why CellTable doesn't show Image when running in Eclipse?

Question

I have the code:

ClickableTextCell imageCell = new ClickableTextCell() {

    @Override
    public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
        if (data != null) {
            String imagePath = "contact.jpg";
            //sb.appendEscaped(imagePath);
            sb.appendHtmlConstant("<img width=\"20\" src=\"" + imagePath + "\">");
        }
    }

};

Column<List<String>,String> imageColumn = new Column<List<String>,String>(imageCell) {

    @Override
    public String getValue(List<String> object) {
        return "";
    }

 };

imageColumn.setFieldUpdater(new FieldUpdater<List<String>, String>() {

     @Override
     public void update(int index, List<String> object, String value) {
         //Window.alert("You clicked " + object.get(index));
     }

 });

table.addColumn(imageColumn, columnName);

But when running in Eclipse it doesn't show an image. The web server got this error:

 Request headers
  Host: 127.0.0.1:8888
  User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0
  Accept: image/png,image/*;q=0.8,*/*;q=0.5
  Accept-Language: en-US,en;q=0.5
  Accept-Encoding: gzip, deflate
  Referer: http://127.0.0.1:8888/abc.html?gwt.codesvr=127.0.0.1:9997
  Cookie: MYCOOKIE=htzjk7g2pva9; JSESSIONID=1xjqdxl3kuuxw; PRODUCTSERVICECOOKIE=1xjqdxl3kuuxw
  Connection: keep-alive
  Response headers
  Set-Cookie: PRODUCTSERVICECOOKIE=1xjqdxl3kuuxw;Path=/
  Content-Length: 1397
  Content-Type: text/html; charset=iso-8859-1
  [WARN] 404 - GET /contact.jpg (127.0.0.1) 1397 bytes
 Request headers
   Host: 127.0.0.1:8888
  User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0
  Accept: image/png,image/*;q=0.8,*/*;q=0.5
  Accept-Language: en-US,en;q=0.5

Also, the second question is where to put the Image so that when we deploy our final web app we can manage the image easily. I'm actually confused with the folder structures in Eclipse.

In MyProject, I have:
war\myproject
war\WEB-INF
war\MyProjet.css
war\MyProjet.html

But in MyProject I also have folder src which contains all java file
src\myproject\client\ (in client folder I put "contact.jpg"
src\myproject\server

I am not sure if I put the contact.jpg in the correct folder. Also, when we deploy our webapp, will Eclipse migrate all the image file into this folder:-->
war\myproject

Answer 1

If you place you image files in rc\myproject\public\img\contact.jpg folder then GWT will copy the files into your war\gwtmodulename\img\contact.jpg folder during compilation and you would need to code using GWT.getModuleBaseURL()+"img\"+"contact.jpg" as that gives you the location of image w.r.t your http:\\domain\war\gwtmodulename .

If you place you image files in war\img folder then you would need to code using GWT.getHostPageBaseURL()+"img\"+"contact.jpg" as that gives you the location of your image w.r.t yout http:\\domain\war\ .

Answer 2

Either:

• Put your image in a public path. Static resources (such as images) in public path are automatically copied in the compiler output directory. To reference them in client code, you have to make them relative to GWT.getModuleBaseURL().

or

• Use an ImageResource within a ClientBundle and use either:

  • imageResource.getSafeUri().asString() chain, to obtain its resolved (safe) URI; or

  • AbstractImagePrototype.create(imageResource).getHTML() for the whole <img> snippet.

I've excluded the new Image(imageResource).getUrl() option as it is useless for your use case (no need for an Image widget).

Also if you want to decorate a cell using an icon, take a look at IconCellDecorator, maybe somehow useful.