在图像加载到wicket时显示加载屏幕

我正在用图像填充

列表视图

在伪代码中：

populateItem(model){
    load base64 from database
    image.setDefaultModel(base64)

图像只是一个
网络组件
，在html中它只是

加载图像时如何显示指示器？。
我首先想到添加
IAjaxIndicatorAware
，但这会在图像执行
AjaxRequest
时触发指示器，因为您似乎将图像加载并显示为Base64 src，它将直接在html响应中发送，稍后不会加载（与带有链接到另一个URI的src的图像相反）

您可以将图像包装在一个文件夹中。
这将在生成内容时首先显示AjaxIndicator，并在加载/生成完成后被实际加载的内容替换：

编辑

我遇到了一个异常：组件必须应用于[img]类型的标记

我没有考虑那个问题。AjaxLazyLoadPanel始终使用
作为html标记来显示它加载的组件。要显示base 64图像，您需要将其包装到另一个面板中：

public class Base64ImagePanel extends Panel {
     public Base64ImagePanel(String wicketId, String base64Data, String contentType) {
          super(wicketId);
          WebMarkupContainer image = new WebMarkupContainer("image") {
                protected void onComponentTag(ComponentTag tag) {
                      super.onComponentTag(tag);
                      checkComponentTag(tag, "img");
                      tag.put("src", "data:" + contentType + ";base64," + base64Data);
                }
          }
          add(image);
     }
}

Base64ImagePanel.html：

<wicket:panel>
    <img wicket:id="image"></img>
</wicket:panel>

这很有趣，我可以看到AjaxIndicator，但当加载完成时，我得到了一个异常：组件必须应用于[img]类型的标记。我这样包装我的图像：@greedsin是的sry，我没有想到这个问题。由于AjaxLazyLoadPanel始终使用div来显示其延迟加载的元素，因此您需要将图像包装到另一个面板中，然后将该面板作为组件返回以使其工作。我对答案进行了编辑，以说明这是如何可能的。当然，您必须对其进行调整以使其适合您（因为您只提供了伪代码，我不知道您是如何构造图像的），但这应该足以让您理解这个想法。
add(new AjaxLazyLoadPanel("imageLazyLoad") {
    @Override
    public Component getLazyLoadComponent(String id) {
         //load your actual base64 from database, i use some example Strings for demonstration in the following line
         Base64ImagePanel imagePanel = new Base64ImagePanel(id, "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==", "image/png");
         return imagePanel;
    }
});