Unable to Display Image in p:graphicImage

Question

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>

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

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).

edited May 23 '17 at 12:21

Community

1
1

answered Jun 13 '12 at 12:02

BalusC

1,082,665
372
3,610
3,555

no its not happening, check the updated code above, i have made the changes and also removed the f:setPropertyActionListener part, in my managed bean imagesStreamer.image the data is returned, but in the page i don't see the image but only the alt part. – user1433804 Jun 13 '12 at 18:11
1

I did it, in most pathetic way, i was storing the ByteArrayInputStream in a arraylist - passing this value again in the same page was not working (atleast for me), now i added one more value to the arraylist where i store the ByteArrayOutputStream and then convert the same to ByteArrayInputStream and then to Streamed Content, somehow it works. Need to find out what is the better way to do the same. Thankyou BalusC for posting answer to most of the question, without you most of the questions will be unanswered, keep up the Great Contribution(knowledge). – user1433804 Jun 14 '12 at 19:05

Unable to Display Image in p:graphicImage

1 Answers1

Linked