Как загрузить изображение из БД внутри страницы JSF с помощью управляемых компонентов?

Question

У меня есть база данных с некоторыми изображениями. Может ли кто-нибудь объяснить мне, как я могу загрузить изображение на странице JSF?

У меня уже есть управляемый компонент, который преобразует объект Image в потоковое содержимое. Этот поток содержимого вызывается со страницы в теге <h:graphicImage>, но когда я проверяю исходный код страницы, нет src, куда можно загрузить изображение.

Answer 1

JSF <h:graphicImage> отображается как элемент HTML <img>. Его атрибут src должен указывать на URL, а не на двоичное содержимое. Поэтому вы должны сохранить URL-адрес (или, по крайней мере, некоторый идентификатор в качестве параметра запроса или pathinfo) в компоненте JSF и создать отдельный сервлет для потоковой передачи изображения из БД в ответ HTTP.

Используйте это на своей странице JSF:

<h:graphicImage value="images/#{bean.imageId}">

Предполагая, что bean.getImageId() возвращает 123, в HTML это выглядит как:

<img src="images/123">

Создайте класс Servlet, который отображается в web.xml на url-pattern из /images/* и реализуйте его метод doGet() следующим образом .:

Long imageId = Long.valueOf(request.getPathInfo().substring(1)); // 123 (PS: don't forget to handle any exceptions).
Image image = imageDAO.find(imageId); // Get Image from DB.
// Image class is just a Javabean with the following properties:
// private String filename;
// private Long length;
// private InputStream content;

response.setHeader("Content-Type", getServletContext().getMimeType(image.getFilename()));
response.setHeader("Content-Length", image.getLength());
response.setHeader("Content-Disposition", "inline; filename=\"" + image.getFilename() + "\"");

BufferedInputStream input = null;
BufferedOutputStream output = null;

try {
    input = new BufferedInputStream(image.getContent());
    output = new BufferedOutputStream(response.getOutputStream());
    byte[] buffer = new byte[8192];
    int length;
    while ((length = input.read(buffer)) > 0) {
        output.write(buffer, 0, length);
    }
} finally {
    if (output != null) try { output.close(); } catch (IOException logOrIgnore) {}
    if (input != null) try { input.close(); } catch (IOException logOrIgnore) {}
}

В ImageDAO#find() вы можете использовать ResultSet#getBinaryStream() для изображения как InputStream из базы данных.

Расширенный пример можно найти в этой статье .