将数据库中的图像显示为 byte[] 作为 JSF 页面中的图形图像

Question

我有来自数据库的 byte[] 图片内容。

private byte[] image;

如何在 JSF 页面中将该字节数组显示为真实的图形图像？

Answer 1

<h:graphicImage> 无法直接做到这一点。它只能指向 URL，而不是 byte[] 或 InputStream。基本上，您需要确保这些字节可直接用作给定 URL 上的 HTTP 响应，然后您可以在 <h:graphicImage> 中使用它们（甚至是普通的 HTML <img>).

前提是您像这样通过 ID 识别图像：

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

下面是此类 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());
    }

}

可以在 this answer 中找到支持 HTTP 缓存的静态资源 servlet 的更高级抽象模板，以及从数据库提供服务的具体示例。

如果你正好用到了JSF实用库OmniFaces on a JSF 2.2 + CDI environment, then you can instead use its <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

只需将一个字符串变量绑定到 UI 上的图像。

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

例如，您从数据库中加载图像 byte[]，然后首先将其编码为 base 64 字符串。

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

将数据库中的图像显示为 byte[] 作为 JSF 页面中的图形图像

Show image as byte[] from database as graphic image in JSF page

jsf

image

bytearray