标签: graphicimage

我需要使用JSF <h:graphicimage>标记或HTML <img>标记在Web应用程序中显示驻留在deploy文件夹之外的图像.我怎样才能做到这一点？

我在JBoss 7.1.1上使用PrimeFaces 3.2.

我试图在MySQL数据库中显示存储在BLOB中的图像<ui:repeat>.图像存储在a中byte[],然后转换StreamedContent为如下:

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

然后我试图在Facelet中显示它如下:

<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中收到以下错误:

SEVERE [org.primefaces.application.PrimeResourceHandler](http - 127.0.0.1-8080-12)流式动态资源出错.

这是怎么造成的,我该如何解决？

我试图显示一个面板,用户可以看到项目列表类别(显示为图像),点击后可以查看该类别中的产品(图像将显示)

为了显示项目类别,我使用了ui:重复nad支持bean calss下面是我的xhtml代码

<ui:repeat id="repeat" value="#{getData.images}" var="img" varStatus="loop">
<h:panelGroup>
<p:graphicImage id="img1" value="#{img}" alt="image not available" >
</p:graphicImage>
</h:panelGroup>
</ui:repeat>

和Managed Bean Code部分

private ByteArrayOutputStream baos = new ByteArrayOutputStream();
private List<StreamedContent> imageList = new ArrayList<StreamedContent>();

public List<StreamedContent> getImages(){
  for (int i = 0; i < sdh.getNumOfImages(); i++) {
    imageID = imageIDArray.get(i);
    ImageService imgSer = new ImageService();
    imgList.add(imageID);
    imgSer.setData(imageID);
    baos = imgSer.getImage();
    try {
      imageList.add(new DefaultStreamedContent(new 
            ByteArrayInputStream(baos.toByteArray())));
    } catch (Exception ex) {
        ex.printStackTrace();
    }
  }
  imageNum = 0;
  return imageList;
}

public …

我有一个视图范围的bean我创建一个人.一个人可以有一张照片.此图片上传了创建此人的同一页面.图片未存储在数据库或磁盘上(因为尚未创建此人).bean必须是视图范围的,因为可以在别处创建一个人,并且它使用相同的bean.如果bean是会话范围的并且用户上传了图片但没有保存该人,则下次用户尝试创建人时将显示该图片.

我用两个豆子解决了这个问题.一个视图作用域创建人和一个会话作用域bean来上传图片并将图片作为流.然而,这会引起上述问题.

我怎样才能以更好的方式解决这个问题？

上传bean:

@ManagedBean(name = "uploadBean")
@SessionScoped
public class UploadBean
{
    private UploadedFile    uploadedFile;

    public UploadedFile getUploadedFile()
    {
        return uploadedFile;
    }

    public StreamedContent getUploadedFileAsStream()
    {
        if (uploadedFile != null)
        {
            return new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()));
        }
        return null;
    }

    public void uploadFile(FileUploadEvent event)
    {
        uploadedFile = event.getFile();
    }
}

创建一个人的bean:

@ManagedBean(name = "personBean")
@ViewScoped
public class PersonBean
{
    private Person newPerson = new Person();

    public Person getNewPerson()
    {
        return newPerson;
    }

    private UploadedFile getUploadedPicture()
    {
        FacesContext context = FacesContext.getCurrentInstance();
        ELContext …

给定<p:dataTable>其中一列中的渲染图像.

<p:dataTable id="dataTable" var="row" value="#{bean}"
             lazy="true"
             skipChildren="true">

    <p:column headerText="Image">
        <p:cellEditor>
            <f:facet name="output">
                <p:graphicImage value="#{imageBean.image}" stream="true" cache="true">
                    <f:param name="id" value="#{row.id}"/>
                    <f:param name="width" value="100"/>
                    <f:param name="height" value="100"/>
                </p:graphicImage>
            </f:facet>

            <f:facet name="input">
                <p:graphicImage value="#{imageBean.image}" stream="true" cache="true">
                    <f:param name="id" value="#{row.id}"/>
                    <f:param name="width" value="100"/>
                    <f:param name="height" value="100"/>
                </p:graphicImage>

                <!-- <p:overlayPanel> here for file upload -->
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Edit">
        <p:rowEditor/>
    </p:column>
</p:dataTable>

_{数据表可以在需要时包含其他必要的常用属性和列.}

当此表(Ajaxically)更新时,所有图像都从数据库(或磁盘文件系统,如果使用)中获取,就像它们根本没有被浏览器缓存一样,即使cache显式设置为true(这是默认值).这在PrimeFaces 5.3决赛中表现良好.

迁移指南没有说明它,但显然有些内容已经改变了缓存<p:graphicImage>.

有什么建议来解决这个问题吗？

在上面的示例中,例如,如果表包含5行中的5个图像,则每次对<p:dataTable>(默认为当前行的内联行编辑除外)进行的更新都将查询数据库10次,这不应该作为获取特别是来自数据库的图像非常昂贵.

使用PrimeFaces 6.0 final(在WildFly 10.0.0 final上运行)的请求/响应头,当向服务器发出初始请求以提供图像时(不起作用 …

我在MySQL上显示以BLOB形式存储的图像<p:graphicImage>,如下所示.

<p:dataTable var="row" value="#{testManagedBean}" lazy="true" editable="true" rows="10">
    <p:column headerText="id">
        <h:outputText value="#{row.brandId}"/>
    </p:column>

    <p:column headerText="Image">
        <p:cellEditor>
            <f:facet name="output">
                <p:graphicImage value="#{brandBean.image}" height="100" width="100">
                    <f:param name="id" value="#{row.brandId}"/>
                </p:graphicImage>
            </f:facet>
            <f:facet name="input">
                <p:graphicImage id="image" value="#{brandBean.image}" height="100" width="100">
                    <f:param name="id" value="#{row.brandId}"/>
                </p:graphicImage>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Edit" width="50">
        <p:rowEditor/>
    </p:column>
</p:dataTable>

_{编辑行时,<p:fileUpload>会显示a <p:overlayPanel>.为简单起见,在这个例子中省略了这个和许多其他的东西,因为它们与具体问题无关.}

关联的JSF托管bean:

@ManagedBean
@ViewScoped
public final class TestManagedBean extends LazyDataModel<Brand> implements Serializable
{
    @EJB
    private final TestBeanLocal service=null;
    private static final long serialVersionUID = 1L;

    @Override
    public List<Brand> …

我正在使用PrimeFaces 5.3 <p:fileUpload>上传PNG图像,我想<p:graphicImage>在保存到数据库之前显示它的预览.

这是一个MCVE:

<h:form enctype="multipart/form-data">
    <p:fileUpload value="#{bean.uploadedFile}" mode="simple" />
    <p:graphicImage value="#{bean.image}" />
    <p:commandButton action="#{bean.preview}" ajax="false" value="Preview" />
</h:form>

private UploadedFile uploadedFile;

public UploadedFile getUploadedFile() {
    return uploadedFile;
}

public void setUploadedFile(UploadedFile uploadedFile) {
    this.uploadedFile = uploadedFile;
}

public void preview() {
    // NOOP for now.
}

public StreamedContent getImage() {
    if (uploadedFile == null) {
        return new DefaultStreamedContent(); 
    } else {
        return new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()), "image/png"); 
    }
}

在辅助bean上没有发生错误,图像将不会加载并显示在前端.客户端提到图像返回404未找到错误.

我在eclipse下收到以下警告:

WARNING: JSF1091: No mime type could be found for file dynamiccontent. To resolve this, add a mime-type mapping to the applications web.xml

发布图片时会导致此错误

在primefaces composant下面:

<p:graphicImage  value="#{bean.image}"/>

Java Bean:

private StreamedContent image;

// Getter
public StreamedContent getImage() {
    try {
        JFreeChart jfreechart = ChartFactory.createPieChart3D("",
                        createDataset(), true, true, false);

        PiePlot3D plot = (PiePlot3D) jfreechart.getPlot();

        File chartFile = new File("dynamichart");
        ChartUtilities.saveChartAsPNG(chartFile, jfreechart, 375, 300);
        chartImage = new DefaultStreamedContent(new FileInputStream(
                        chartFile), "image/png");
        return chartImage;
    } catch (Exception e) {
        e.printStackTrace();
        return new …

当用户点击ui中的p:graphicsImage时,我想做一些处理:重复我该怎么做.

<ui:repeat id="repeat" value="#{getData.image}" var="imageLst" varStatus="loop">
   <h:panelGroup>
      <p:graphicImage id="gi1" value="#{imageStreamer.image}" alt="image not available" >
          <f:param name="id" value="#{imageLst.imageID}" />
          <p:ajax id="aj2" event="click" listener="#{getData.searchID}" immediate="true" update=":form:tabView:check :form:growl"/>
      </p:graphicImage>
   </h:panelGroup>
</ui:repeat>

在上面的代码中,如果我放置ajax部分不会被触发.如何监控a点击'p:graphicImage'

为了使用灯箱,我需要一个指向生成的图像的链接<p:graphicImage>.

最终,HTML应如下所示:

<a href="image.jpg" data-lightbox="bilder">
  <img src="image.jpg" />
</a>

到目前为止,这是我的JSF尝试:

<h:outputLink data-lightbox="bilder" value="???">
  <p:graphicImage value="#{imageStreamer.image}">
    <f:param name="imageId" value="#{gameReader.game.cover.id}"/>
  </p:graphicImage>
</h:outputLink>

如何获取<p:graphicImage>返回的具体URL,StreamedContent以便我可以在链接中使用它？