在一页上显示多个 <p:graphicImage>答案

【问题标题】：Display multiple <p:graphicImage> on one page在一页上显示多个 <p:graphicImage>
【发布时间】：2016-04-14 18:29:58
【问题描述】：

这是一个大型软件的简化片段。我在使用 p: grapicImage 显示图像时遇到问题。我想在每个“粘贴”之后连续显示图像。通常，外部图形由实用程序类复制并转换为 DefaultStreamedContent 和 *.png 文件，后者位于 resource/images 文件夹中。使用 DefaultStreamedContent，当我单击第一个粘贴时，它正确显示图像 1，但是当我单击第二个粘贴时，图像 2 显示并且图像 1 消失，当我单击第三个粘贴时，图像 3 显示，但图像 2 也消失了。使用 *.png 文件，第一次粘贴不显示任何图像，第二次粘贴显示图像 1 但不显示图像 2，第三次粘贴显示图像 2 和图像 1 但不显示图像 3。最后，如果单击，我可以看到所有图像第三次粘贴后的网页重新加载按钮。附加的 xhtml 文件包含 *.png 文件的活动显示。我尝试了各种方法，包括 update= 各种段，注意到很多人对 p:grapicImage 有问题，但我没有找到补救措施。我的问题是：为什么代码会以这种方式运行以及如何使其正常工作。

使用代码显示图片：

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Test</title>
</h:head>

<body>
    <h:outputStylesheet name="css/styles.css" />

    <h:form id="weeklyupdate">
        <p:layout id="panel1" style="width:1240px; height:880px;">

            <p:layoutUnit styleClass="layout" position="center">
                <h:panelGrid columns="2" style="width:1200px">
                    <p:layout style="width:600px; height:840px;">
                        <p:layoutUnit position="center">
                            <p:commandButton value="Paste 1" 
                                actionListener="#{weeklyProjectsUI.pasteImageWork}" ajax="false" />

                            <p:graphicImage id="imgwork" url="resources/images/work.png"
                                style="width: 570px; min-height:25%" cache="false" />

                            <ui:remove>
                                <p:graphicImage id="imgwork" styleClass="imagedisplay"
                                    value="#{weeklyProjectsUI.imageWork}"
                                    style="width: 570px; min-height:25%" cache="false" />
                            </ui:remove>
                        </p:layoutUnit>
                    </p:layout>
                    <p:layout style="width:600px; height:840px;">
                        <p:layoutUnit styleClass="layout" position="center">
                            <br></br>

                            <p:commandButton value="Paste 2"
                                actionListener="#{weeklyProjectsUI.pasteImageEvidence1}"
                                ajax="false" />

                            <p:graphicImage id="imgevidence1" styleClass="imagedisplay"
                                url="resources/images/evidence1.png"
                                style="width: 570px; min-height:25%" cache="false" />


                            <ui:remove>
                                <p:graphicImage styleClass="imagedisplay"
                                    value="#{weeklyProjectsUI.imageEvidence1}"
                                    style="width: 570px; min-height:25%" cache="false" />
                            </ui:remove>

                            <br></br>
                            <br></br>

                            <p:commandButton value="Paste 3"
                                actionListener="#{weeklyProjectsUI.pasteImageEvidence2}"
                                ajax="false" />

                            <ui:remove>
                                <p:graphicImage styleClass="imagedisplay"
                                    value="#{weeklyProjectsUI.imageEvidence2}"
                                    style="width: 570px; min-height:25%" cache="false" />
                            </ui:remove>

                            <p:graphicImage id="imgevidenc2" styleClass="imagedisplay"
                                url="resources/images/evidence2.png"
                                style="width: 570px; min-height:25%" cache="false" />

                        </p:layoutUnit>
                    </p:layout>
                </h:panelGrid>
            </p:layoutUnit>
        </p:layout>
    </h:form>
</body>

</html>

..以及backing bean的基本部分

    public void pasteImageWork() throws IOException{

    String work = "work";
    imageService.imageCopy(work);
    loadImageWork();
}

public void pasteImageEvidence1() throws IOException {

    String evidence1 ="evidence1";
    imageService.imageCopy(evidence1);
    loadImageEvidence1();
}

public void pasteImageEvidence2() throws IOException {

    String evidence2="evidence2";
    imageService.imageCopy(evidence2);
    loadImageEvidence2();

}

public void loadImageWork() throws IOException{

    imageWork = imageService.getGraphicImage();
    System.out.println("Work loaded: " + imageWork.toString());

}

public void loadImageEvidence1() throws IOException {

    imageEvidence1 = imageService.getGraphicImage();
    System.out.println("Evidence1 loaded: " + imageEvidence1.toString());

}

public void loadImageEvidence2() throws IOException {

    imageEvidence2 = imageService.getGraphicImage();
    System.out.println("Evidence2 loaded: " + imageEvidence2.toString());

}

顺便说一句，我使用的是 primefaces 5.3。日食。

【问题讨论】：

似乎我的问题即使是专家也很难回答，我并不感到惊讶，因为在我看来，如果不了解graphicImage背后的JQuery代码，可能无法弄清楚。可能有一个或多个 http 请求只接受最后创建的 StreamedContent 并跳过存储在内存中的其他 StreamedContent 变量。我想知道是否有可能查看graphicImage的jQuery源代码来找出可以解决这个问题的方法。

标签： java image jsf primefaces

【解决方案1】：

我选择的解决方案涉及在单独的网页（选项卡）上显示每个图像，每个图像都使用 DefaultStreamedContent 使用 UI 层 bean 方法创建，如下例所示：

   public void loadImageWork() throws IOException {
    imageWork = imageService.getGraphicImage();
    imageWorkName = imageWork.getName();
    streamWork = imageService.getOs();
 RequestContext.getCurrentInstance().execute("window.open('weeklyWork.xhtml')");

Os 在这里是 ByteArrayOutputStream。

接下来可以根据需要将所有图像一次传输到 SQL Server 文件流存储。

【讨论】：