Wicket在簡單的表格中添加圖像

Question

我嘗試用簡單的表格添加一個圖像。我在谷歌搜索，但我不明白的答案。目前，我只是在單元格中的圖像路徑。

page.html中

<table id="table51"> 
    <tr> 
     <th id="th51"><span wicket:id="chap51t1"></span></th> 
     <th id="th51"><span wicket:id="chap51t2"></span></th> 
     <th id="th51"><span wicket:id="chap51t3"></span></th> 
     <th id="th51"><span wicket:id="chap51t4"></span></th> 
    </tr> 
    <tr wicket:id="perso"> 
     <td id="td51" wicket:id="perso_nom"></td> 
     <td id="td51" wicket:id="perso_image"></td> 
     <td id="td51" wicket:id="perso_description"></td> 
     <td id="td51" wicket:id="perso_type"></td> 
    </tr> 
</table> 

page.java

List<Table51Bean> tableperso = new ArrayList<Table51Bean>(); 
    tableperso.add(new Table51Bean(getString("chap51p1n"), getString("chap51p1i"), getString("chap51p1d"), getString("chap51p1t"))); 
    tableperso.add(new Table51Bean(getString("chap51p2n"), getString("chap51p2i"), getString("chap51p2d"), getString("chap51p2t"))); 
    ListView<Table51Bean> perso = new ListView<Table51Bean>("perso", tableperso) { 
     @Override 
     protected void populateItem(final ListItem<Table51Bean> item) { 
      // Retrieve the current Locale 
      final Table51Bean loc = item.getModelObject(); 

      // Add a Label for the nom 
      item.add(new Label("perso_nom", new AbstractReadOnlyModel<String>() { 
       @Override 
       public String getObject() { 
        return loc.getNom(); 
       } 
      })); 

      // Add a Label for the image 
      item.add(new Label("perso_image", new AbstractReadOnlyModel<String>() { 
       @Override 
       public String getObject() { 
        return loc.getImage(); 
       } 
      })); 


      // Add a Label for the description 
      item.add(new Label("perso_description", new AbstractReadOnlyModel<String>() { 
       @Override 
       public String getObject() { 
        return loc.getDescription(); 
       } 
      })); 

      // Add a Label for the type 
      item.add(new Label("perso_type", new AbstractReadOnlyModel<String>() { 
       @Override 
       public String getObject() { 
        return loc.getType(); 
       } 
      })); 
     } 
    }; 
    divchap51.add(perso); 

我想知道是否有可能在圖像中的代碼集成？

Answer 1

這是可能的。只需添加一個Panel與Image而不是Label。

或者，我還喜歡將class添加到空的Label並解決用CSS設置圖像。

.person_image_class 
{ 
    display: inline-block; 
    background-image: url('myimgae.png'); 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 120px; 
    height: 90px; 
} 

item.add(new Label("perso_").add(new AttributeModifier("class", true, new Model<String>("person_image_class"))));