3

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

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

图像满足这个条件：

class Image extends WebComponent -> class WebComponent extends Component

我用标签（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>

意外的运行时异常

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>

异常描述是不言自明的： <img> 标记丢失，但我找不到解决方法并显示带图像的模式窗口。我正在使用 wicket.version 6.17.0。先感谢您。

4

1 回答 1

3

您只能将 Image 添加到 html 类型的标签中<img>。您正在尝试将其添加到<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>

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

于 2014-10-02T14:35:15.170 回答