Question

我在GlassFish 4.1下使用JSF 2.2和PrimeFaces 5.3

在应用程序内部，我使用该方法显示数据库中的图像。这意味着我没有网址。从这个角度来看，有很多例子，但我会在这里粘贴以便更有用。

这里是小面孔

<p:graphicImage value="#{applicationScopedBean.imagesFromDb}" class="img">
    <f:param name="imageId" value="#{actualAd.favouriteImageId}" />
    <f:param name="cvlTimeStamp" value="#{now}" />
</p:graphicImage>

这里是Backing Bean

public StreamedContent getImagesFromDb() {
        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 imageId = context.getExternalContext().getRequestParameterMap().get("imageId");
            return new DefaultStreamedContent(new ByteArrayInputStream(imageManager.getById(Long.valueOf(imageId)).getContent()));
        }
    }

这里是生成的HTML代码的示例

<img src="/myWebApp/faces/javax.faces.resource/dynamiccontent.properties?ln=primefaces&amp;v=5.3&amp;pfdrid=GgwXKejrBbRvnC%2Fxp98FzlaymhDf7Gb%2BEVoD%2BlqKVRmYUBBZeMmjKw%3D%3D&amp;pfdrt=sc&amp;imageId=23&amp;myTimeStamp=Sun+May+15+19%3A19%3A08+CEST+2016&amp;pfdrid_c=true">

按照设计，为了使用来自fancybox的图库，我们需要一个类似于以下的代码

<a class="fancybox" rel="group" href="resources/bootstrap/css/images/single/1.jpg">
   <img id="img_01" alt="" class="raised" src="resources/bootstrap/css/images/single/1.jpg" style="width: 100%" />

但是使用带图像的图像，我不会在href值中使用所需的链接。有机会检索生成的图像网址吗？基本上我需要检索用于填充img标签的src属性的生成字符串。

有可能解决问题吗？谢谢！

Answer 1

解决方案是使用自定义ID标记每个p：graphicImage和他的h：outputLink。

<c:forEach items="#{myController.images}" var="img" begin="0" class="hidden-xs" varStatus="loop">
  <h:outputLink id="aInsideLightbox#{loop.index+1}" class="fancybox imgCVLGalleryDetail hidden-xs" rel="group">
    <p:graphicImage id="imgInsideLightbox#{loop.index+1}" value="#{applicationScopedBean.imagesFromDb}" class="img">
      <f:param name="imageId" value="#{img.imageWrapper.id}" />
    </p:graphicImage>
  </h:outputLink>                                               
</c:forEach>

然后在页面准备就绪时在前端

<h:outputScript library="js" name="external.js"/>
<script>
  $(document).ready(function () {
    setUrlInTheFancyboxLinkAndImage();
    setTypeImageInFancybox();
  });
</script>

并在外部.js文件中使用以下函数。

function setUrlInTheFancyboxLinkAndImage() {
    for (i = 0; i < 20; i++) {
        $imgToImprove = document.getElementById("imgInsideLightbox" + i);
        if ($imgToImprove !== null) {
            $aToImprove = document.getElementById("aInsideLightbox" + i);
            if ($aToImprove !== null) {
                $aToImprove.setAttribute("href", $imgToImprove.getAttribute("src"));
            }
        }
    }
}

function setTypeImageInFancybox() {
    $(".fancybox").fancybox({
        type: 'image',
        openEffect: 'none',
        closeEffect: 'none'
    }); }

p：graphicImage和Fancybox集成

1 个答案: