检票口在简单表格中添加图像

Question

我尝试在带有检票口的简单表格中添加图像。我在谷歌上搜索，但我不明白答案。目前，我只有单元格中图像的路径。

页.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>

页.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

这是可能的。只需添加一个带有Image而不是Label的Panel。

或者，我也更喜欢，在空Label中添加一个class，并使用 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"))));