Imágenes fuera del Context con PrimeFaces

Aquí un ejemplo de como mostrar imágenes que están fuera del contexto de mi aplicación web.

Este ejemplo fue realizado especificamente con la versión 5.0.1 de PrimeFaces

Se debe tomar en cuenta que el componente <p:graphicImage> necesita recibir en la propiedad value un objeto StreamedContent, el cual, a continuación se muestra cómo implementarlo:
En el managedBean:


 private StreamedContent graphicImage;

  public void prepararImagen(){

    String path = "C:\\imagenes\\buhoos.jpg"
    graphicImage = new DefaultStreamedContent(new FileInputStream(path), "image/png");
  }

  public StreamedContent getGraphicImage() {  
        prepararImagen();
        return graphicImage;
    }

    public void setGraphicImage(StreamedContent graphicImage) {
        this.graphicImage = graphicImage;
    }

El método prepararImagen se puede mandar llamar antes de mostrar la imagen y una vez mostrada el componente recogerá el valor establecido en el StreamedContent.

En el XHTML:

 <p:graphicImage cache="false" height="200" id="dimage" title="mi foto buhoos" value="#{myBean.graphicImage}" width="200">
 </p:graphicimage>

Con esto nuestro componente mostrara la imagen correctamente.

Deja tu comentario en el blog. Saludos

7 thoughts on “Imágenes fuera del Context con PrimeFaces

  1. Muchas gracias. Era lo que estaba buscando hace varios días!!

    Los molesto con una pregunta, cómo sería entonces si quiero cargar la imagen con una ruta determinada como en este caso, pero desde un método activado por un botón, ejemplo commandButton de primefaces?
    Muchas gracias.
    Un saludo.

    1. Para desplegar una imagen desde un commandButton puedes realizarlo así considerando el código del ejempo, fijate que el overlayPanel esta referenciado con el commandButton:

       <p:commandButton id="imageBtn" value="Basic" type="button" />
          <p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
              <p:graphicImage value="#{myBean.graphicImage}" width="300" />
          </p:overlayPanel>
      

      Si realizaste todo el ejemplo sólo debes copiar y pegar el código en tu página y listo….
      Si te fue de ayuda por favor da un like y un twitter

  2. Ummm…pero una pregunta si yo quiero ver una imagen desde mi aplicacion web que este almacenada en mi base de datos mysql como hago? …elcampo foto de mi bd és de tipó longblob y en java tengo mapeado mi bd y el atributo foto es de tipo byte [ ] …. asi es mi base de datos

    Create table proyecto.cuenta(
    Foto longBlob
    ); //los demas datos hago caso omiso solo interesa la foto

    Asi esta mi codigo java
    @Lob
    @Column(name =”Foto”)
    Private byte [ ] foto;

    Porfaaa es urgente necesito que en mi aplicacion web se vea mi imagen este es mi correo nicolasdavid1997@hotmail.com

    1. Hola Nicolas

      Para convertir los bytes de la base de datos a una imagen, el mapeo esta correcto según lo que indicas, ahora debe usar lo siguiente:

      byte[] imagenBytes = cuenta.foto();
      IOUtils.write(imagenBytes, new FileOutputStream("C:\\buhoos\\imagenes\\imagen.jpg"));
      

      Para eso va a necesitar la librería commons-ios

      Espero haberte ayudado.

      Saludos,

  3. Una consulta tengo un error en un proyecto con primface el error es que me sale pagina no encontrada .Utilizo eclipse neon,primfaces 3.5,servidor widfly 10.0,jsf mojarra 2.2.por favor ayuda urgente

    1. Estimado Ronny

      Sería de mucha ayuda si nos envias capturas de pantallas para visualizar un poco más el error que tienes, pero podrías revisar las siguientes cosas que pueden estar dando el error:

      – Asegurate que la URL a donde estas redirigiendo este correcta “http://localhost:8080/app-web/pagina.jsf”
      – Tambien asegura que en tu archivo web.xml este configurado de manera correcta el mapeo:

      		<servlet-mapping>
      			<servlet-name>Faces Servlet</servlet-name>
      			<url-pattern>*.faces</url-pattern>
      		</servlet-mapping>
      	

      – Revisa que tu faces-config.xml se encuentre correcto en su árbol de navegación esto dependera de como estes redireccionando tu pagina web.

      Espero te sea de ayuda.

      Saludos

  4. gracias!! me sirvio mucho, sabes de alguna forma de mostrar la imagen en una ventana emergente al darle click. si no.
    enserio muchas gracias me sirvio mucho.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *