从数据库中以 byte[] 格式显示图片，在 JSF 页面上作为图形图像展示

Question

我从数据库中获得了图像内容，其类型为byte[]。

private byte[] image;

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

- user3364181

Answer 1

这不是使用<h:graphicImage>直接实现的。它只能指向一个URL，而不能指向byte[]或InputStream。基本上，您需要确保这些字节直接作为HTTP响应在给定的URL上可用，然后您可以在<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());
    }

}

您可以在这篇答案中找到一个更高级的静态资源servlet的抽象模板，支持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);
    }

}

- BalusC

---

我只有来自数据库的字节数组，没有其他东西，并且我正在使用JSF，所以我只有managedBean，你能帮我吗？ - user3364181

当然可以。请参考上面的答案，其中提供了两种可能的启动示例。如果需要，请进行修改以适应您的情况。 - BalusC

@Balus，我可以问一下Image是哪个包中的数据类型，或者在这行代码中Image image = service.find(id);中的Image image是byte[]、Blob还是其他什么吗？谢谢。 - heisenberg

@p3ace：这只是你的自定义类。还可以参考https://dev59.com/EXI-5IYBdhLWcg3wsKl4和https://dev59.com/EV0a5IYBdhLWcg3wLV8G。 - BalusC

@Balus 谢谢。仍在努力吸收和理解每一部分。 - heisenberg

第二个链接（<o:graphicImage>）已损坏。 - sandwood

Answer 2

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

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

例如，如果您正在从数据库中加载图像字节数组，则首先将其编码为base 64字符串。

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

- Abhishek Jha

---

尽管它可能（确实）有效，但如果您想缓存页面但刷新图像，则从页面缓存的角度来看，这不是最佳解决方案。 - Kukeltje

大家好，这个回答是正确的，但 img 元素应该像这样写： <img src="data:image/png;base64,#{imageString}"> - andydoe