Mostrar imagen como byte[] de la base de datos como imagen gráfica en la página JSF

bytearray

Question

Tengo contenido de imagen como byte[] de la base de datos.

private byte[] image;

¿Cómo puedo mostrar esa matriz de bytes como una imagen gráfica real en la página JSF?

Answer 1

Esto no es directamente posible con <h:graphicImage> . Solo puede apuntar a una URL, no a un byte[] ni a InputStream . Básicamente, debe asegurarse de que esos bytes estén directamente disponibles como una respuesta HTTP en la URL dada, que luego puede usar en <h:graphicImage> (o incluso HTML <img> ).

Siempre que esté identificando la imagen por su ID de esta manera:

<h:graphicImage value="/image/#{someBean.imageId}" />

Aquí hay un ejemplo inicial de tal servlet:

@WebServlet("/image/*")
public class ImageServlet extends HttpServlet {

    @EJB
    private ImageService service;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Long id = Long.valueOf(request.getPathInfo().substring(1));
        Image image = service.find(id);
        response.setContentType(getServletContext().getMimeType(image.getName()));
        response.setContentLength(image.getBytes().length);
        response.getOutputStream().write(image.getBytes());
    }

}

En esta respuesta se puede encontrar una plantilla abstracta más avanzada para un servlet de recursos estáticos, que admite el almacenamiento en caché HTTP, junto con un ejemplo concreto para servir desde la base de datos.

Si utiliza la biblioteca de utilidades JSF OmniFaces en un entorno JSF 2.2 + CDI, puede utilizar su <o:graphicImage> que puede utilizarse de manera mucho más intuitiva.

<o:graphicImage value="#{imageBean.getBytes(someBean.imageId)}" />

@Named
@ApplicationScoped
public class ImageBean {

    @EJB
    private ImageService service;

    public byte[] getBytes(Long imageId) {
        return service.getImageBytes(imageId);
    }

}

Answer 2

Simplemente vincule una variable de cadena a la imagen en la interfaz de usuario.

<img src="data:image/png;base64, "#{imageString}">

Por ejemplo, está cargando el byte de imagen [] desde la base de datos y luego lo codifica primero en la cadena base 64.

String imageString= new String(Base64.encodeBase64(byte array fetched from database));