如何在p：selectOneMenu的所选项目上显示图像

Question

我正在尝试实现高级的selectOneMenu（PrimeFaces），以基于其标志图标选择语言环境。图标显示在列表中，但不显示所选项目（在showcase上也是如此）。我该怎么办？

<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上放什么。

谢谢

Answer 1

您可以使用#{resource['library:name']}语法为资源打印URL，如How to reference CSS / JS / image resource in Facelets template?所示>

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

<h:graphicImage library="default" height="20" name="img/#{localeSIVar.language}.svg" />
在itemLabel内，并且itemLabelEscaped的<f:selectItems>属性设置为true，那么您可以使用以下语法作为itemLabel的值：

itemLabel="<img height='20' src='#{resource['default:img/' += localeSIVar.language += '.svg']}' />"
注意：

• 您只能在其中使用纯HTML，而不能使用JSF组件。
• 为了提高可读性，最好在纯HTML中使用单引号作为属性值分隔符。
• 如上所述，单引号在EL表达式中仍然可以正常工作，无需重新转义。您甚至可以在EL表达式中使用双引号，但是此处在代码编辑器中突出显示语法很容易失败，从而可能引起不必要的混乱。
• +=运算符自EL 3.0起是新的；如果您仍在使用旧版本的EL，请转至How to concatenate a String in EL?以替代在EL中串联字符串的方法（然后将其重新用作变量）。