-1

I have a image in a directory like "Users\name\folder\image.jpg"

How can i display the image in jsf?

<p:graphicImage value="" width="400px" height="400px" />

Any idea how i can do this?

Felipe
  • 75
  • 1
  • 11
  • Why you want to access it outside project ? Now if you will deploy your project in any server outside your local machine then how your project will access the image ? – Subodh Joshi Jul 18 '16 at 04:53
  • Here is one solution for you https://dzone.com/articles/display-images-systemnon – Subodh Joshi Jul 18 '16 at 05:07
  • @SubodhJoshi: Maybe the "Users" is a shared folder and accessible on other systems as well... – Kukeltje Jul 18 '16 at 10:35

1 Answers1

1

From Primefaces User Guide

3.51 GraphicImage

GraphicImage extends standard JSF graphic image component with the ability of displaying binary data like an inputstream. Main use cases of GraphicImage is to make displaying images stored in database or on-the-fly images easier. Legacy way to do this is to come up with a Servlet that does the streaming, GraphicImage does all the hard work without the need of a Servlet.

...

Getting started with GraphicImage

GraphicImage requires an org.primefaces.model.StreamedContent content as it’s value for dynamic images. StreamedContent is an interface and PrimeFaces provides a built-in implementation called DefaultStreamedContent. Following examples loads an image from the classpath.

<p:graphicImage value="#{imageBean.image}" />
public class ImageBean {

  private StreamedContent image;

  public DynamicImageController() {
    InputStream stream = this.getClass().getResourceAsStream("barcalogo.jpg");
    image = new DefaultStreamedContent(stream, "image/jpeg");
  }

  public StreamedContent getImage() {
    return this.image;
  }
}

DefaultStreamedContent gets an inputstream as the first parameter and mime type as the second. In a real life application, you can create the inputstream after reading the image from the database. For example java.sql.ResultsSet API has the getBinaryStream() method to read blob files stored in database.

...

How It Works

Dynamic image display works as follows;

  • Dynamic image encryps its value expression string to generate a key.
  • This key is appended to the image url that points to JSF resource handler.
  • Custom PrimeFaces ResourceHandler gets the key from the url, decrypts the expression string to something like #{bean.streamedContentValue}, evaluates it to get the instance of StreamedContent from bean and streams contents to client.

As a result there will be 2 requests to display an image, first browser will make a request to load the page and then another one to the dynamic image url that points to JSF resource handler. Please note that you cannot use viewscope beans as they are not available in resource loading request.

Passing Parameters and Data Iteration

You can pass request parameters to the graphicImage via f:param tags, as a result the actual request rendering the image can have access to these values. This is extremely handy to display dynamic images if your image is in a data iteration component like datatable or ui:repeat.

StreamedContent

There are two StreamedContent implementations out of the box; DefaultStreamedContent is not uses an InputStream and not serializable whereas the serializable ByteArrayContent uses a byte array.

Instead of loading an image from classpath as shown in the example, use java.io classes to obtain an InputStream of your image from file system.

irieill
  • 1,203
  • 10
  • 32