Avoid rendering empty byte array with <o:graphicImage>

Question

I got two <o:graphicImage> to display the stored image and a dummy image if there is no image. Actually, the size of the stored images can be zero. If so, the first <o:graphicImage is rendered, but the image is empty and not rendered properly.

<o:graphicImage id="image" alt="Image"
        lastModified="#{userProfile.user.lastModified}"
        rendered="#{not empty images.getImage(userProfile.user.id)}"
        value="#{images.getImage(userProfile.user.id)}"

<o:graphicImage name="images/profile.png" width="125"
        rendered="#{empty images.getImage(userProfile.user.id)}" />

How can I display the dummy image if the user image is empty or has the length/size 0?

Answer 1

You'd really better not call that image streamer method in a rendered attribute. It's invoked multiple times during the JSF lifecycle, hereby inefficiently getting the image bytes from the DB every time.

The model also doesn't look right in first place. I suggest to change the model. Make the image ID a FK of the User or perhaps UserProfile table and entity.

@Column(name="image_id")
private Long imageId;

Then, when an user uploads/sets an image, save the image ID there. This way you can use it as below:

<o:graphicImage 
    value="#{images.getImage(userProfile.user.imageId)}" 
    rendered="#{not empty userProfile.user.imageId}" />

<h:graphicImage
    name="images/profile.png" 
    rendered="#{empty userProfile.user.imageId}" />

Don't forget to alter the image streamer to get image by its own ID instead of user ID.