使用 p:graphicImage 和 StreamedContent 显示来自数据库或远程源的动态图像

Question

我正在尝试显示在 中作为 StreamedContent 保存在数据库中的图像字节，如下所示：

<p:graphicImage  value="#{item.imageF}" width="50"  id="grpImage" height="80"/>

private StreamedContent content; // getter and setter

public StreamedContent getImageF() {

    if (student.getImage() != null) {
        InputStream is = new ByteArrayInputStream(student.getImage());
        System.out.println("Byte :"+student.getImage());
        content = new DefaultStreamedContent(is, "", student.getStuID());
        System.out.println("ddd ------------------------------- " + content);
        return content;
    }

    return content;
}

这将返回一个空白图像。这是如何引起的以及如何解决？

标准输出打印以下内容：

INFO: Byte :[B@a2fb48
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@b0887b
INFO: Byte :[B@a2fb48
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@1d06a92
INFO: Byte :[B@d52f0b
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@39a60
INFO: Byte :[B@d52f0b
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@8c3daa
INFO: Byte :[B@124728a
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@1dbe05b
INFO: Byte :[B@124728a
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@66a266
INFO: Byte :[B@a2fb48
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@1293976
INFO: Byte :[B@a2fb48
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@17b7399
INFO: Byte :[B@d52f0b
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@1e245a5
INFO: Byte :[B@d52f0b
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@4a7153
INFO: Byte :[B@124728a
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@1561bfd
INFO: Byte :[B@124728a
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@47a8c2

Answer 1

需要特殊的 getter 方法。即每个生成的图像将被调用两次，每次都在完全不同的 HTTP 请求中。

第一个 HTTP 请求（请求 JSF 页面的 HTML 结果）将首次调用 getter，以便生成具有正确唯一性且自动生成的 HTML 元素src 属性中的 URL 包含有关每当 Web 浏览器要请求图像时应该调用哪个 bean 和 getter 的信息。请注意，getter 此时不需要需要返回图像的内容。它不会以任何方式使用，因为这不是 HTML 的工作方式（图像不会“内联”在 HTML 输出中，而是单独请求）。

一旦 Web 浏览器检索到 HTML 结果作为 HTTP 响应，它将解析 HTML 源，以便将结果直观地呈现给最终用户。一旦浏览器在解析 HTML 源代码时遇到 元素，它就会按 src 属性中指定的 URL 发送一个全新的 HTTP 请求下载该图像的内容并将其嵌入到视觉演示中。这将第二次调用 getter 方法，该方法又应返回实际图像内容。

在您的特定情况下，PrimeFaces 显然无法识别和调用 getter 来检索实际图像内容，或者 getter 没有返回预期的图像内容。 #{item} 变量名称的使用以及日志中的大量调用表明您在 或 中使用它。最有可能的是，支持 bean 是请求范围的，并且在请求图像期间未正确保留数据模型，并且 JSF 将无法在正确的迭代期间调用 getter。视图作用域 bean 也不起作用，因为当浏览器实际请求图像时，JSF 视图状态不可用。

---

要解决这个问题，最好的办法是重写 getter 方法，以便可以在每个请求的基础上调用它，其中您将唯一的图像标识符作为 传递而不是依赖某些可能在后续 HTTP 请求期间“不同步”的支持 bean 属性。为此使用一个没有任何状态的单独的应用程序范围的托管 bean 是完全有意义的。此外，InputStream 只能读取一次，不能多次。

换句话说：永远不要将 StreamedContent 或任何 InputStream 甚至 UploadedFile 声明为 bean 属性；仅当网络浏览器实际请求图像内容时，才在无状态 @ApplicationScoped bean 的 getter 中全新创建它。

例如

<p:dataTable value="#{bean.students}" var="student">
    <p:column>
        <p:graphicImage value="#{studentImages.image}">
            <f:param name="studentId" value="#{student.id}" />
        </p:graphicImage>
    </p:column>
</p:dataTable>

，StudentImages 支持 bean 可以如下所示：

@Named // Or @ManagedBean
@ApplicationScoped
public class StudentImages {

    @EJB
    private StudentService service;

    public StreamedContent getImage() throws IOException {
        FacesContext context = FacesContext.getCurrentInstance();

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the HTML. Return a stub StreamedContent so that it will generate right URL.
            return new DefaultStreamedContent();
        }
        else {
            // So, browser is requesting the image. Return a real StreamedContent with the image bytes.
            String studentId = context.getExternalContext().getRequestParameterMap().get("studentId");
            Student student = studentService.find(Long.valueOf(studentId));
            return new DefaultStreamedContent(new ByteArrayInputStream(student.getImage()));
        }
    }

}

请注意，这是一个非常特殊的情况，其中在 getter 方法中执行业务逻辑是完全合法的，考虑到 如何; 在幕后工作。在 getters 中调用业务逻辑通常是不受欢迎的，另请参阅 为什么 JSF 调用多次吸气剂。不要使用此特殊情况作为其他标准（非特殊）情况的借口。另请注意，您无法使用 EL 2.2 传递方法参数的功能，例如 #{studentImages.image(student.id)} 因为此参数不会最终出现在图像 URL 中。因此，您确实需要将它们作为 传递。

---

如果您碰巧使用 OmniFaces 2.0 或更高版本，请考虑使用其 相反，可以更直观地使用，将应用程序范围的 getter 方法直接委托给服务方法并支持 EL 2.2 方法参数。

因此：

<p:dataTable value="#{bean.students}" var="student">
    <p:column>
        <o:graphicImage value="#{studentImages.getImage(student.id)}" />
    </p:column>
</p:dataTable>

请

@Named // Or @ManagedBean
@ApplicationScoped
public class StudentImages {

    @EJB
    private StudentService service;

    public byte[] getImage(Long studentId) {
        return studentService.find(studentId).getImage();
    }

}

参阅有关该主题的博客。

Answer 2

尝试包含哑剧类型。在您发布的示例中，您将其设置为“”。空白图像可能是因为它无法将流识别为图像文件，因为您将该字段设置为空字符串。因此，添加 image/png 或 image/jpg 的 mime 类型，看看是否有效：

String mimeType = "image/jpg";
StreamedContent file = new DefaultStreamedContent(bytes, mimeType, filename);  

Answer 3

这里有几种可能性（如果不是的话，请发布整个课程）。

1）你没有正确初始化图像
2）你的流是空的，所以你什么也得不到

我假设student.getImage()有一个byte[]的签名，所以首先确保该数据实际上是完整的并且代表一个图像。其次，您没有指定应该是“image/jpg”或您正在使用的任何内容类型。

这是一些用于检查的样板代码，我为此使用 Primefaces 2。

/** 'test' package with 'test/test.png' on the path */
@RequestScoped
@ManagedBean(name="imageBean")
public class ImageBean
{
    private DefaultStreamedContent content;

    public StreamedContent getContent()
    {
        if(content == null)
        {
            /* use your database call here */
            BufferedInputStream in = new BufferedInputStream(ImageBean.class.getClassLoader().getResourceAsStream("test/test.png"));
            ByteArrayOutputStream out = new ByteArrayOutputStream();

            int val = -1;
            /* this is a simple test method to double check values from the stream */
            try
            {
                while((val = in.read()) != -1)
                    out.write(val);
            }
            catch(IOException e)
            {
                e.printStackTrace();
            }

            byte[] bytes = out.toByteArray();
            System.out.println("Bytes -> " + bytes.length);
            content = new DefaultStreamedContent(new ByteArrayInputStream(bytes), "image/png", "test.png");
        }

        return content;
    }
}

和一些标记...

<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.prime.com.tr/ui"
>

    <h:head>

    </h:head>

    <h:body>
        <p:graphicImage value="#{imageBean.content}" />
    </h:body>
</html>

如果该代码有效，那么您的设置就正确了。尽管事实上它是流的垃圾代码（不要在生产中使用它），但它应该为您提供一个排除故障的点。我的猜测是，您的 JPA 或其他数据库框架中可能会发生一些情况，其中 byte[] 为空或格式错误。或者，您可能只是遇到内容类型问题。

最后，我将从 bean 克隆数据，以便 Student.getImage() 只会被复制到新数组中然后使用。这样，如果您发生了未知的事情（其他移动对象或更改 byte[] 的事情，您就不会弄乱您的流。

执行类似的操作：

byte[] data = new byte[student.getImage().length]
for(int i = 0; i < data.length; i++)
  data[i] = student.getImage()[i];

以便您的 bean 拥有一个副本（或 Arrays.copy()--无论你的船漂浮什么）我都无法强调像这样的简单内容/内容类型通常是什么问题。

Answer 4

BalusC 的答案是（像往常一样）正确的一个。

但请记住一件事（正如他已经说过的）。最终请求由浏览器完成，从构建的 标记中获取 URL。这不是在“jsf 上下文”中完成的。

因此，如果您尝试访问phaseId（日志记录或任​​何原因），

context.getCurrentPhaseId().getName()

这将导致NullPointerException，并且您将得到的某种误导性错误消息是：

org.primefaces.application.resource.StreamedContentHandler () - Error in streaming dynamic resource. Error reading 'image' on type a.b.SomeBean

我花了相当长的时间才弄清楚是什么问题。