Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

jsf 2 - Unable to Display Image in p:graphicImage

I have the following code, i can see images in the ui:repeat part but when i click on the image the command link and setPropertyActionListener works fine but the image does not get displayed in the required panel grid.

<p:layoutUnit id="centre" position="center"  >
    <h:panelGrid id="test" columns="2" cellpadding="2" >
        <h:panelGroup>
            <div id="imageWrap" style="width:600px; height:400px; margin:auto; overflow:scroll; position:relative;">
                <p:graphicImage id="prodImage" value="#{imageController.image}" alt="unable to load image #{imageController.imageID}" />
            </div>
        </h:panelGroup>
    </h:panelGrid>
</p:layoutUnit>

<p:layoutUnit id="left" position="west" >
    <h:panelGrid  id="panelGrid3" columns="2" cellspacing="2" cellpadding="2">
        <ui:repeat id="repeat5" value="#{getData.imageThumbnail1}" var="imagesLst" varStatus="loop">
            <h:panelGroup>
                <p:commandLink update=":form:tabView:test" >
                    <f:setPropertyActionListener target="#{imageController.imageID}" value="#{imagesLst.imageID}" />
                    <p:graphicImage id="gi5" value="#{imagesStreamer.image}" alt="image not available" >
                        <f:param name="id" value="#{imagesLst.imageID}" />
                    </p:graphicImage>
                </p:commandLink>
            </h:panelGroup>
        </ui:repeat>
    </h:panelGrid>
</p:layoutUnit>

the supporting bean

@ManagedBean
@SessionScoped
public class imageController implements Serializable {

    private String imageID;
    private StreamedContent sc;

    /** Creates a new instance of imageController */
    public imageController() {
    }

    public void setImageID(String imageID) {
        this.imageID = imageID;
        System.out.println("ImageController set == "+ this.imageID);
    }

    public String getImageID(){
        return imageID;
    }

    public StreamedContent getImage() {
        System.out.println("ImageController get == "+ this.imageID);
        if (imageID != null) {
            ByteArrayInputStream image = GetData.findImages(imageID);
            System.out.println("Passing Default Streamed Content");
            return new DefaultStreamedContent(image);
        }
        return sc;

    }
}

The "unable to load image #{imageController.imageID}" is displayed with the selected image id but i cannot see the image in the graphic panel. In the log also i don't see any error message, it returns the streamedcontent.

UPDATED CODE:1

<p:layoutUnit id="centre" position="center"  >
    <h:panelGrid id="test" columns="2" cellpadding="2" >
        <h:panelGroup>
            <div id="imageWrapper" style="width:600px; height:400px; margin:auto; overflow:scroll; position:relative;">
                <p:graphicImage id="Img1" value="#{imagesStreamer.image}" alt="image id to be displayed #{imagesLst.imageID}" >
                    <f:param name="id5" value="#{imagesLst.imageID}" />
                </p:graphicImage>
            </div>
        </h:panelGroup>
    </h:panelGrid>
</p:layoutUnit>

<p:layoutUnit id="right" position="east" >
    <h:panelGrid  id="panelGrid3" columns="2" cellspacing="2" cellpadding="2">
        <ui:repeat id="repeat5" value="#{getData.imageThumbnail1}" var="imagesLst" varStatus="loop">
            <h:panelGroup>
                <p:commandLink id="cl5" update=":form:tabView:test">
                    <p:graphicImage id="gi5" value="#{imagesStreamer.image}" alt="image not available3" >
                        <f:param name="id5" value="#{imagesLst.imageID}" />
                    </p:graphicImage>
                </p:commandLink>
            </h:panelGroup>
        </ui:repeat>
    </h:panelGrid>
</p:layoutUnit>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Replace

<p:graphicImage id="prodImage" value="#{imageController.image}" alt="unable to load image #{imageController.imageID}" />

by

<p:graphicImage id="prodImage" value="#{imagesStreamer.image}" alt="unable to load image #{imageController.imageID}">
    <f:param name="id" value="#{imageController.imageID}" />
</p:graphicImage>

and remove that ImageController#getImage() method. Keep using the ImageStreamer for all dynamic images (assuming that you used the one as provided in one of your previous questions).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...