Open original image when a thumb image is clicked

问题

Displaying images using <p:graphicImage> as follows.

<p:graphicImage value="#{imageBean.image}" width="80" height="60">
    <f:param name="id" value="1"/>
    <f:param name="width" value="80"/>
    <f:param name="height" value="60"/>
</p:graphicImage>

The ImageBean looks like the following.

@Named
@ApplicationScoped
public class ImageBean {

    @Inject
    private Service service;

    public ImageBean () {}

    public StreamedContent getImage() throws IOException {
        FacesContext context = FacesContext.getCurrentInstance();

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            return new DefaultStreamedContent();
        } else {
            Map<String, String> requestParameterMap = context.getExternalContext().getRequestParameterMap();
            String id = requestParameterMap.get("id");
            String widthParam = requestParameterMap.get("width");
            String heightParam = requestParameterMap.get("height");

            int width = Utils.isNumber(widthParam) ? Integer.parseInt(widthParam) : -1;
            int height = Utils.isNumber(heightParam) ? Integer.parseInt(heightParam) : -1;

            byte[] bytes = Utils.isNumber(id) ? service.findImageById(Long.parseLong(id), width, height) : null;
            return bytes == null ? null : new DefaultStreamedContent(new ByteArrayInputStream(bytes));
        }
    }
}

The service.findImageById() method returns a byte[] obtained after resizing the given image according to the dimentions given.

This will display a thumb image after being resized on the server side according to the dimensions given.

<p:graphicImage> generates an image URL dynamically which is to be assigned to src of the generated <img> tag. This would look something like the following.

/ContextPath/javax.faces.resource/dynamiccontent.properties.xhtml?ln=primefaces&amp;v=5.3&amp;pfdrid=aAPHlxcQ2lcqfvzacYoCC6iUxLU1VVFp&amp;pfdrt=sc&amp;id=9&amp;height=100&amp;width=100&amp;pfdrid_c=true

Is it possible to open the original image in a new tab, when a thumb image is clicked so that it can correspond to the HTML something like the following?

<a href="show_original_image.php?id=1" target="_blank">
    <img src="show_thumb_image.php?id=1" width="80" height="60" style="border: 0px none;"/>
</a>

What would be the value of href of <a> and how it is to be assigned to href dynamically in the context of JSF / PrimeFaces?

来源：https://stackoverflow.com/questions/38358382/open-original-image-when-a-thumb-image-is-clicked

标签

image

jsf

primefaces

graphicimage