在< p:graphicImage>中显示数据库Blob图像在< ui:repeat>内部 [英] Display database blob images in <p:graphicImage> inside <ui:repeat>

问题描述

我正在JBoss 7.1.1上使用PrimeFaces 3.2.

I'm using PrimeFaces 3.2 on JBoss 7.1.1.

我正在尝试显示存储在<ui:repeat>中MySQL数据库的BLOB中的图像.图像存储在byte[]中，然后按以下方式转换为StreamedContent:

I am trying to display an image which is stored in a BLOB in a MySQL database in <ui:repeat>. The image is stored in a byte[] and then converted to a StreamedContent as follows:

InputStream stream = new ByteArrayInputStream(ingredient.getImage());
ingredient.setJsfImage(new DefaultStreamedContent(stream, "image/jpg"));

然后，我尝试将其显示在Facelet中，如下所示:

Then I am trying to display it in a Facelet as follows:

<ui:repeat var="ingredient" value="#{formBean.ingredientResultSet}">
    <p:panel id="resultsPanel" header="#{ingredient.location.shopName}">
        <p:graphicImage value="#{ingredient.jsfImage}" alt="No picture set" />
...

但是，在加载页面时，在JBoss中出现以下错误:

However, when loading the page, I get the following error in JBoss:

严重[org.primefaces.application.PrimeResourceHandler](http--127.0.0.1-8080-12)动态资源流错误.

SEVERE [org.primefaces.application.PrimeResourceHandler] (http--127.0.0.1-8080-12) Error in streaming dynamic resource.

这是怎么引起的，我该如何解决?

How is this caused and how can I solve it?

推荐答案

您需要认识到<p:graphicImage>实际上仅使用URL呈现<img src>元素，然后当浏览器打算将其单独调用时，webbrowser会分别调用该元素.解析获得的HTML标记并呈现结果.

You need to realize that the <p:graphicImage> actually renders a <img src> element with just an URL which is then later individually invoked by the webbrowser when it's about to parse the obtained HTML markup and present the results.

因此，无论您在<p:graphicImage>的getter方法中执行什么操作，都必须按照可以在每个请求的基础上调用它的方式进行设计.因此，最明智的方法是用<f:param>创建一个<p:graphicImage>，其中<p:graphicImage value>指向一个完全独立的请求或应用程序范围的Bean，而<f:param value>指向唯一的图像标识符.

So, whatever you do in the getter method of <p:graphicImage> it must be designed that way that it can be invoked on a per-request basis. So, the most sane approach would be to create a <p:graphicImage> with a <f:param> wherein the <p:graphicImage value> points an entirely standalone request or application scoped bean and the <f:param value> points the unique image identifier.

例如

<p:graphicImage value="#{images.image}">
    <f:param name="id" value="#{someBean.imageId}" />
</p:graphicImage>

Images支持bean如下所示:

Where the Images backing bean can look like this:

@ManagedBean
@ApplicationScoped
public class Images {

    @EJB
    private ImageService service;

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

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the view. 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 id = context.getExternalContext().getRequestParameterMap().get("id");
            Image image = service.find(Long.valueOf(id));
            return new DefaultStreamedContent(new ByteArrayInputStream(image.getBytes()));
        }
    }

}

或者，如果您已经在使用 OmniFaces 2.0或更高版本，请考虑使用其博客.

Or, if you're already using OmniFaces 2.0 or newer, then consider using its <o:graphicImage> instead which can be used more intuitively, almost exectly the way as you expected. See also the blog on the subject.

• 使用p:graphicImage和StreamedContent显示来自数据库的动态图像

这篇关于在< p:graphicImage>中显示数据库Blob图像在< ui:repeat>内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！