Question

我正在尝试在Wicket中创建包含图像的模态窗口（org.apache.wicket.markup.html.image.Image）。如Wicket用户指南（https://wicket.apache.org/guide/guide/ajax.html）中所述：

模态窗口的内容可以是另一个组件，也可以是页。

图像满足这个条件：

class Image extends WebComponent -> class WebComponent extends Component

我尝试使用Label（org.apache.wicket.markup.html.basic.Label）并且它有效。当我用Image完成时，我得到了异常。这是我的Java和HTML代码（logo.png与.java和.html在同一个包中）：

爪哇

// Modal window with Image
final ModalWindow mwImage = new ModalWindow("modalWindowWithImage");
PackageResourceReference imgRef = new PackageResourceReference(this.getClass(), "logo.png");
Image img = new Image(mwImage.getContentId(), imgRef);
mwImage.setContent(img);
add(mwImage);

add(new AjaxLink("imageLink") {
    @Override
    public void onClick(AjaxRequestTarget target) {
        mwImage.show(target);
    }
});

HTML

<a href="#" wicket:id="imageLink">image link</a>
<div wicket:id="modalWindowWithImage"></div>

意外的RuntimeException

Last cause: Component [content] (path = [30:modalWindowWithImage:content]) must be applied to a tag of type [img], not:  '<div wicket:id="content">' (line 0, column 0)

这是生成的HTML代码：

<a href="javascript:;" wicket:id="imageLink" id="imageLink22">image link</a>
<div wicket:id="modalWindowWithImage" id="modalWindowWithImage25" style="display:none"><wicket:panel xmlns:wicket="http://wicket.apache.org">
    <div id="content26" style="display:none"></div>
</wicket:panel></div>

异常描述不言自明：＆lt; img＆gt;标签丢失，但我找不到如何解决它的方式并显示带图像的模态窗口。我正在使用wicket.version 6.17.0。提前谢谢。

Answer 1

您只能将图片添加到<img>类型的html标记中。您正尝试将其添加到<div>。就像你只能添加一个链接到<a> html标签。你可以在这里做的最好的事情是创建一个带有图像的面板，并将其添加到你的模态窗口

public class ImgPanel extends Panel {

    public ImgPanel(PackageResourceReference imgRef) {
        add(new Image("imgid", imgRef));
    }
}

使用html

<html><body>
<wicket:panel>
    <img wicket:id="imgid" ... />
</wicket:panel>
</body></html>

现在将此面板添加到您的模态窗口。

如何在Wicket中显示带有图像的模态窗口

1 个答案: