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

Question

这是大型软件的简化片段。 我在使用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>

..以及后备豆的基本部分

    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。 与蚀。

Answer 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')");

操作系统在这里是ByteArrayOutputStream。

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-04-27 17:50:12

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-04-27 17:50:12

解决方案1
0 已采纳 2016-04-27 17:50:12