blogLenguajes de ProgramaciónPrimefaces

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

buhoos

Buhoos.com está conformado por profesionales especializados, dispuestos a impartir su experiencia con el propósito de complementar y generar nuevo conocimiento que demanden los futuros profesionales para una mejor integración en el ámbito laboral, además solventar los requerimientos que surjan en implantaciones de nuevos proyectos tecnológicos a nivel empresarial.

9 comentarios en «Imágenes fuera del Context con PrimeFaces»

  • 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.

    Respuesta
    • 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

      Respuesta
  • 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

    Respuesta
    • 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,

      Respuesta
  • 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

    Respuesta
    • 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

      Respuesta
  • 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.

    Respuesta
    • Hola, me ayudo bastante este ejemplo,. Pero estoy intentando no jalar una imagen así de especifico como se muestra en el ejemplo. Quiero jalar un recuso cualquiera de la carpeta y ente caso estaba haciendo algo asi: library=»NombredeCarpeta» name=»{p.foto}». el problema es que library no me permite jalar un recurso de afuera del contexto. O no se como hacerlo. No se si me podrían ayudar por favor

      Respuesta
      • Hola Angel
        Si el directorio esta dentro de tu proyecto entonces estas dentro de contexto por lo que la ruta debes armarlo con el «path» de tu contexto pero asegurate que la imagen tenga acceso publico. Puedes verificar el acceso colocando la URL en tu navegador hasta acceder la misma recuerda que tu contenedor web debe estar arriba. Saludos

        Respuesta

Responder a Ricardo Cancelar la respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.