Показывать изображение как байт [] из базы данных как графическое изображение на странице JSF

Question

У меня есть изображение как byte[] из базы данных.

private byte[] image;

Как я могу показать этот байтовый массив как реальное графическое изображение на странице JSF?

Answer 1

Это невозможно напрямую с <h:graphicImage>, Он может указывать только на URL, а не на byte[] ни InputStream, По сути, вам нужно убедиться, что эти байты напрямую доступны как HTTP-ответ на заданный URL-адрес, который затем можно использовать в <h:graphicImage> (или даже обычный HTML <img>).

При условии, что вы идентифицируете изображение по его идентификатору, вот так:

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

Вот пример запуска такого сервлета:

@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());
    }

}

В этом ответе можно найти более продвинутый абстрактный шаблон для сервлета статических ресурсов, поддерживающий кэширование HTTP, а также конкретный пример обслуживания из базы данных.

Если вам случится использовать служебную библиотеку JSF OmniFaces в среде JSF 2.2 + CDI, вы можете вместо этого использовать ее <o:graphicImage> который может быть использован гораздо более интуитивно.

<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

Просто привяжите одну строковую переменную к изображению в интерфейсе пользователя.

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

Например, вы загружаете изображение byte[] из базы данных, а затем сначала кодируете его в строке 64 base.

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