Get concrete URL of returning StreamedContent

Question

In order to use the lightbox, I need a link to the image as generated by <p:graphicImage>.

Ultimately, the HTML should look like this:

<a href="image.jpg" data-lightbox="bilder">
  <img src="image.jpg" />
</a>

This is my JSF attempt so far:

<h:outputLink data-lightbox="bilder" value="???">
  <p:graphicImage value="#{imageStreamer.image}">
    <f:param name="imageId" value="#{gameReader.game.cover.id}"/>
  </p:graphicImage>
</h:outputLink>

How do I get the concrete URL of <p:graphicImage> returning StreamedContent so that I can use it in my link?

Good question. As quick'n'dirty fix, you can easily use JS for this. By the way, PrimeFaces has already a `` component out the box. No need to use a 3rd party library for that. — BalusC, Aug 13 '13 at 18:53

score 1 · Answer 1 · answered Jul 19 '14 at 19:48

This have one solution - using servlet here is a servlet which will work in any jsf application

package com.dossier.web.handlers;

//~--- non-JDK imports --------------------------------------------------------



import com.dossier.backend.services.mongo.FileService;
import com.mongodb.gridfs.GridFSDBFile;

//~--- JDK imports ------------------------------------------------------------

import java.io.*;

import javax.faces.context.FacesContext;
import javax.servlet.ServletException;
import javax.servlet.SingleThreadModel;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.IOUtils;

/**
 *
 * @author Armen Arzumanyan
 */
@WebServlet(urlPatterns = { "/PreviewImage" })
public class PreviewImage extends HttpServlet implements SingleThreadModel {
    private static final long serialVersionUID = -6624464650990859671L;
    private FileService       fileAction       = new FileService();

    @Override
    public void init() throws ServletException {
        super.init();
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPreviewImage(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {}

    private void doPreviewImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        FacesContext context   = FacesContext.getCurrentInstance();
        String       fileIdStr = request.getParameter("fileId");
        String       widthStr  = request.getParameter("w");
        GridFSDBFile file      = null;
        int          width     = 0;

        if ((widthStr != null) && (widthStr.length() > 0)) {
            try {
                width = Integer.parseInt(widthStr);
            } catch (NumberFormatException e) {}
        }

        if (fileIdStr != null) {
            if (fileAction != null) {
                file = fileAction.getFile(fileIdStr.trim());
            }

            if (file != null) {
                byte[] content = IOUtils.toByteArray(file.getInputStream());

                if (content != null) {
                    String mimeType = file.getContentType();

                    response.addHeader("Pragma", "cache");
                    response.addHeader("Cache-Control", "max-age=3600, must-revalidate");
                    response.addDateHeader("Expires", System.currentTimeMillis() + 1000 * 3600 * 10);
                    response.setContentType(mimeType);

                    try {
                        if (((mimeType != null)
                                && (mimeType.equalsIgnoreCase("image/gif") || mimeType.equalsIgnoreCase("image/x-png")
                                    || mimeType.equalsIgnoreCase("image/png") || mimeType.equalsIgnoreCase("image/jpg")
                                    || mimeType.equalsIgnoreCase("image/jpeg"))) || (width == 0)) {
                            response.getOutputStream().write(content);
                        } else {

//                          ByteArrayInputStream bi = new ByteArrayInputStream(content);
//                          InputStream thumbStream = scaleImageJPG(bi, width);
//                          byte[] thumbContent = new byte[thumbStream.available()];
//                          thumbStream.read(thumbContent);
                            response.getOutputStream().write(content);
                        }
                    } catch (IOException e) {

                        // log.error("file content send error");
                        e.printStackTrace();
                    } catch (Exception e) {

                        // log.error("file exception: " + e);
                        e.printStackTrace();
                    } finally {
                        content = null;
                        file    = null;
                    }

                    return;
                }
            } else {

                // TODO add page not found
                response.addHeader("Pragma", "no-cache");
                response.addDateHeader("Expires", System.currentTimeMillis() - 1000 * 3600);

                try {
                    response.getWriter().println("file object is null");
                } catch (Exception e) {}

                return;
            }
        }

        // TODO add page not found
        response.addHeader("Pragma", "no-cache");
        response.addDateHeader("Expires", System.currentTimeMillis() - 1000 * 3600);

        try {
            response.getWriter().println("file id is not set");
        } catch (Exception e) {}

        // log.debug("file ID parameter is not set or file is not found");
        return;
    }

    // </editor-fold>
}


//~ Formatted by Jindent --- http://www.jindent.com

And here is a web page code

<h:graphicImage id="primage" styleClass="img-rounded img-responsive"
                                                                url="/PreviewImage?w=250&amp;fileId=#{updatePersonBean.person.imageId}"
                                                                width="250" rendered="#{updatePersonBean.person.imageId != null}"/>                                              
                                                <h:graphicImage id="primagenew" styleClass="img-rounded img-responsive"
                                                                url="/resources/img/userpic_simple.gif"
                                                                width="250" rendered="#{updatePersonBean.person.imageId == null}"/>

Enjoy

This is a solution, but I was looking for something that would not need an additional servlet. — Lukas Eichler, Jul 20 '14 at 13:52
No another solution, any another solution will be based on servlet, because whole JSF also based on servlets, also any java web application should use some kind of servlets, this solution I used in a lot of projects.:) — Armen Arzumanyan, Jul 21 '14 at 17:31

score 0 · Answer 2 · answered Mar 04 '19 at 11:35

An easy way without need to implement a new bean is to output an invisible graphicImage and copy around the URL using Javascript:

<h:form id="myForm">
    <p:graphicImage id="urlOutputter" value="#{MyForm.image}" style="display: none;"/>
    <span id="imageData" data-image="***URL HERE***"/>
    <script>
        var url = document.getElementById("myForm:urlOutputter").src;
        document.getElementById("imageData").setAttribute("data-image", url);
    </script>

score 0 · Answer 3 · answered Mar 05 '19 at 07:43

Have suggested a solution to this question here.

Long story short, you can use the getImageSrc method of the GraphicImageRenderer in order to get the image URI.

First step is extending the GraphicImageRenderer to publish the protected getImageSrc method:

public class GraphicImageRendererXtension extends GraphicImageRenderer {
    // publish the protected GraphicImageRenderer#getImageSrc method:
    public String getPublicImageSrc(FacesContext context, GraphicImage image) throws Exception {
        return getImageSrc(context, image);
    }
}

The we need a method in managed bean that enables us use the getPublicImageSrc method:

public class MyBean {
  // ...
  public String getImgUri(GraphicImage imgComponent) throws Exception {
    assert null != imgComponent;
    String imgUri = new GraphicImageRendererXtension().getPublicImageSrc(FacesContext.getCurrentInstance(),
                imgComponent);
    return imgUri;
  }
}

Finally we bind the p:graphicImage component to an arbitrary variable and invoke myBean.getImgUri to get the Uri for any purpose:

<h:outputLink value="#{myBean.getImgUril(myImage)}">
        <p:graphicImage binding="#{myImage}" value="#{myBean.img}" />
</h:outputLink>

Get concrete URL of returning StreamedContent

3 Answers3

Linked