jsf - images - Mostrar imágenes de blob de base de datos en<p: graphicImage> dentro de<ui: repeat>

primefaces graphic image from database

Question

Estoy usando PrimeFaces 3.2 en JBoss 7.1.1.

Estoy tratando de mostrar una imagen que está almacenada en un BLOB en una base de datos MySQL en <ui:repeat> . La imagen se almacena en un byte[] y luego se convierte a StreamedContent siguiente manera:

InputStream stream = new ByteArrayInputStream(ingredient.getImage());
ingredient.setJsfImage(new DefaultStreamedContent(stream, "image/jpg"));

Entonces estoy tratando de mostrarlo en un Facelet de la siguiente manera:

<ui:repeat var="ingredient" value="#{formBean.ingredientResultSet}">
    <p:panel id="resultsPanel" header="#{ingredient.location.shopName}">
        <p:graphicImage value="#{ingredient.jsfImage}" alt="No picture set" />
...

Sin embargo, al cargar la página, aparece el siguiente error en JBoss:

SEVERE [org.primefaces.application.PrimeResourceHandler] (http - 127.0.0.1-8080-12) Error al transmitir el recurso dinámico.

¿Cómo es esto causado y cómo puedo resolverlo?

Answer 1

Gracias BalusC. Hice esto definiendo un número entero en el bean de respaldo y le asigné un valor diferente al actualizar el ByteArray para la imagen. Este entero sirve como identificador único para la imagen. Luego configuro este entero como el valor de <f:param> dentro de <p:graphicImage> en la página.

etiqueta de imagen parece

 <p:graphicImage value="#{empBean.image}">
    <f:param name="id" value="#{empBean.imageId}" />
  </p:graphicImage>`

y establecer la imagen en backing bean como

 if(user.getPicture()!=null){
        imageId = (int) new Date().getTime();
        BinaryStreamImpl bs = new BinaryStreamImpl(user.getPicture());  
//picture is byte[] property in user class      
        this.image =   new DefaultStreamedContent(bs.getInputStream(), "image/png");
    }

Ahora está funcionando bien.

Answer 2

No entiendo por qué lo necesitas. Simplemente puede crear un servlet que obtendrá la imagen de la base de datos con un mapeo "/images/yourimage.jpg".

Aquí hay un tutorial rápido con un código correspondiente sobre cómo hacer esto.

JSF - Visualización de imágenes desde la base de datos en JSF

Answer 3

mmm I 99% seguro de que <p:graphicImage no funciona con ui: repita que tendrá muchos problemas con esto (porque lo hice con XD), le recomiendo que cree un servlet y que sirva las imágenes como un inputstream (hay una muchos ejemplos por ahí).

Answer 4

<p:graphicImage> darse cuenta de que <p:graphicImage> realidad representa un elemento <img src> con solo una URL que luego es invocada individualmente por el navegador web cuando está a punto de analizar el marcado HTML obtenido y presentar los resultados.

Entonces, haga lo que haga en el método getter de <p:graphicImage> , debe diseñarse de tal manera que pueda invocarse por solicitud. Entonces, el enfoque más sensato sería crear un <p:graphicImage> con un <f:param> donde el <p:graphicImage value> apunte a una solicitud completamente independiente o un bean con ámbito de la aplicación y el <f:param value> apunte al identificador de imagen único.

P.ej

<p:graphicImage value="#{images.image}">
    <f:param name="id" value="#{someBean.imageId}" />
</p:graphicImage>

Donde el bean Images Backing puede verse así:

@ManagedBean
@ApplicationScoped
public class Images {

    @EJB
    private ImageService service;

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

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we''re rendering the view. Return a stub StreamedContent so that it will generate right URL.
            return new DefaultStreamedContent();
        }
        else {
            // So, browser is requesting the image. Return a real StreamedContent with the image bytes.
            String id = context.getExternalContext().getRequestParameterMap().get("id");
            Image image = service.find(Long.valueOf(id));
            return new DefaultStreamedContent(new ByteArrayInputStream(image.getBytes()));
        }
    }

}

O bien, si ya está utilizando OmniFaces 2.0 o posterior , entonces considere usar su <o:graphicImage> que se puede usar de manera más intuitiva, casi de manera tal como esperaba. Ver también el blog sobre el tema.

Ver también:

• Visualice la imagen dinámica desde la base de datos con p: graphicImage y StreamedContent

Answer 5

graphicImage tener en cuenta a qué graphicImage componente de imagen graphicImage en la página. Se representa en el elemento HTML <img> . En el navegador, la solicitud se realizará para la página JSF, luego también se realizarán solicitudes posteriores para cada una de las imágenes en la página.

Estas imágenes provienen del servlet de recursos de PrimeFaces y no de FacesServlet, lo que significa que el alcance de Managed Bean y sus propiedades probablemente no sean aplicables.

Intenta cargar el blob en una matriz de bytes primero y luego probablemente comenzará a funcionar.

EDITAR: Vea mi respuesta siguiente a esta pregunta similar. graphicimage no representa el contenido transmitido en Primefaces

Answer 6

InputStream is = new ByteArrayInputStream((byte[]) yourBlobData);
myImage = new DefaultStreamedContent(is, "image/png");

en la página jsf;

<p:graphicImage value="#{controller.myImage}" style="width:200px;width:500px" />