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"))));