使用多个p：graphicImage在没有多个HTTP请求的情况下多次显示同一图像

Question

我在XHTML页面中使用p:graphicImage标记以大而小的方式显示同一图像：

<f:facet name="header">#{msgs.ATTR_PICTURE}</f:facet>
<h:panelGroup>
    <p:graphicImage id="product_thumbnail" styleClass="thumbnail"
            cache="false" value="#{imageBean.streamedImageById}">
        <f:param name="productId" value="#{_product.id}" />
    </p:graphicImage>
    <p:tooltip id="imagebigger" for="product_thumbnail" position="right" showDelay="0" showEffect="blind" styleClass="tooltip_thumbnail">
        <p:graphicImage value="#{imageBean.streamedImageById}" styleClass="thumbnail_large" cache="false">
            <f:param name="productId" value="#{_product.id}" />
        </p:graphicImage>
    </p:tooltip>
</h:panelGroup>

我想系统地避免每个要显示的图像都有2个HTML请求。有办法避免这种情况吗？

Answer 1

我从第一个cache="false"中删除p:graphicImage（默认为true），图像是在客户端的第一个<img ... />（p:graphicImage呈现给它）中检索的，并且仅从客户端缓存第二个缓存，而没有检索两次。

cache="false"可能是出于您在注释中提到的原因而来的，但这实际上是一个新问题，Stackoverflow中存在多个Q / A，但是哪个最合适取决于您的详细信息。用例。您的新问题可能是重复的问题，也可能是单独的新有效问题……甚至可能是在第一个cache="true上返回p:graphicImage并用其他内容替换了第二个（甚至是一些纯客户端，一边的“复制”（例如）可能是个好方法。

Answer 2

您可以使用stream属性并将其设置为false。这将在base64中呈现图像，而不是呈现图像的URL。我不建议这样做，因为标记会很大，而且性能可能会差很多。