0

我正在使用 gwt 在表格单元格中显示图像，它是动态图像，因此我不需要对其进行硬编码，但它不会显示其中的实际图像。这是我的代码..

我的 UiBinder 有点像：

    <table>
       <tr><td ui:field="tableCellElement"/></tr>
    </table>

我的演示者正在访问方法中的元素：

    void someMethod(Image patterImage) {
        tableCellElement.setBackgroundImage("url('"+patternImage.getUrl()+"')");
        // and I have tried this without using url as well but it doesn't work
        // DOM.setstyleattribute also doesn't work...
    }

代码成功执行，但没有显示图像，我目前使用的是 IE9，但我也在 IE8 和 7 上尝试过。

我知道它可以用 css 解决，但这里我们的图像是动态的，所以如果我们有 100 个图像，我不能为每个图像定义 100 个 css ..

如果有人能为我解决这个问题，我真的很感激。

4

1 回答 1

0

Your code is basically ok. The reason you don't see the image is probably just that the default size of the td is 0.

Background images don't influence the size of the element, so you need to set it manually. If the size of all images is the same, you can set it once in UiBinder:

<ui:style>
  .myTableCell {
    width: 32px;
    height: 32px;
  }
</ui:style>

...

<table>
  <tr>
    <td class="{style.myTableCell}" ui:field="tableCellElement"></td>
  </tr>
</table>

Otherwise, set it programmatically:

Style style = tableCellElement.getStyle();

style.setBackgroundImage("url('"+patternImage.getUrl()+"')");
style.setWidth(patternImage.getWidth(), Unit.PX);
style.setHeight(patternImage.getHeight(), Unit.PX);
于 2012-07-05T10:13:16.490 回答