使用多个 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

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

Answer 2

我从第一个p:graphicImage中删除cache="false"(默认为true(图像在客户端上的第一个<img ... />(p:graphicImage呈现到(中检索，并且只是从客户端缓存中显示第二个，而无需检索两次。

cache="false"

可能存在的原因就像您在评论中提到的那样，但这实际上是一个新问题，Stackoverflow 中有几个问答，但哪一个最合适取决于您用例的细节。您的新问题可能再次重复，也可能是一个新的有效问题本身......甚至可能是在第一个p:graphicImage上返回cache="true并用其他东西替换第二个(例如，甚至是一些纯粹的客户端"重复"(可能是一个好方法。