时间戳

首页 > 解决方案 > 如何在 p:selectOneMenu 的选定项目上显示图像

jsf - 如何在 p:selectOneMenu 的选定项目上显示图像

问题描述

我正在尝试实现一个高级selectOneMenu（PrimeFaces）来根据其标志图标选择一个语言环境。图标显示在列表中，但不显示所选项目（同样发生在陈列柜上）。我怎么能这样做？

<p:selectOneMenu id="mySOMId" value="#{localeBean.locale}" var="mySOMVar" converter="#{localeConverter}" >
    <f:selectItems 
        value="#{myBean.locales}" 
        var="localeSIVar"
        itemLabel="#{localeSIVar.language}" 
        itemValue="#{localeSIVar}" />
    <p:column style="text-align: center;" >
        <h:graphicImage library="default" height="20" name="img/#{mySOMVar.language}.svg" />
    </p:column>
</p:selectOneMenu>

我可以看到它f:selectItems有一个itemLabelEscaped属性，我可以用它来输出<img>标签itemLabel，但我不知道我会在它的src.

谢谢

标签： jsfprimefacesselectonemenu

解决方案

您可以使用#{resource['library:name']}语法打印资源的 URL，如如何在 Facelets 模板中引用 CSS / JS / 图像资源？

因此，鉴于您实际上想使用

<h:graphicImage library="default" height="20" name="img/#{localeSIVar.language}.svg" />

在 中itemLabel，并且该itemLabelEscaped属性<f:selectItems>设置为true，那么您可以使用以下语法作为 的值itemLabel：

itemLabel="&lt;img height='20' src='#{resource['default:img/' += localeSIVar.language += '.svg']}' /&gt;"

笔记：

  • 您只能在那里使用纯 HTML，而不是 JSF 组件。
  • 为了提高可读性，最好在纯 HTML 中使用单引号作为属性值分隔符，而纯 HTML 又声明为用双引号括起来的属性。您当然也可以使用&quot;这些单引号来代替。
  • 如上所示，单引号在 EL 表达式中继续正常工作，无需重新转义。您甚至可以在 EL 表达式中使用双引号，但代码编辑器中的语法高亮在这里很容易失败，可能会导致不必要的混淆。
  • +=运算符是自 EL 3.0 以来的新运算符；如果您仍在使用较旧的 EL 版本，请前往如何在 EL 中连接字符串？用于在 EL 中连接字符串的替代方法（然后将其作为变量重用）。

推荐阅读