在没有多个 HTTP 请求的情况下使用多个 p:graphicImage 多次显示相同的图像答案

【问题标题】：Displaying the same image several times with multiple p:graphicImage without multiple HTTP requests在没有多个 HTTP 请求的情况下使用多个 p:graphicImage 多次显示相同的图像
【发布时间】：2020-04-24 21:09:22
【问题描述】：

我在我的 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 请求。有没有办法避免这种情况？

【问题讨论】：

我假设您尝试将cache="false" 更改为cache="true"？它没有帮助？
嗯！ cache=true 正在解决 2 个 html 请求，但如果由于某些原因图像已更新，则返回时页面将不会刷新最后一次修改。仅当页面刷新时 (F5)。我想知道是否可以为缓存设置持续时间。
那么你将如何在纯 html/http 中解决这个矛盾呢？对...像您建议的那样缓存超时。所以寻找一个关于这个新问题的新问题。我将为这个初始问题创建一个答案
stackoverflow.com/help/someone-answers

标签： image jsf primefaces graphicimage

【解决方案1】：

如果您从第一个p:graphicImage（默认为true）中删除cache="false"，则图像在客户端上的第一个<img ... />（p:graphicImage 呈现到）中检索并仅显示从客户端缓存第二个而不检索它两次。

cache="false" 可能因为您在 cmets 中提到的原因而存在，但这实际上是一个新问题，在 Stackoverflow 中有几个 Q/A，但哪个最合适取决于详细信息你的用例。您的新问题可能再次重复或新的有效问题本身......甚至可能是在第一个 p:graphicImage 上返回 cache="true 并用其他东西替换第二个（甚至是一些纯粹的客户 -侧面“重复”例如）可能是一个好方法。

【讨论】：

它解决了单击同一页面时的问题->请求数除以2。但是当来自另一个页面时，我仍然可以看到相同数量的请求。是否因为我的 Bean 是 SessionScoped 而链接的？
感谢您的回答。如果您对您提到的我感兴趣的最后一种方法有任何参考。

【解决方案2】：

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

【讨论】：

当然可以；无需额外的 HTTP 请求