如何在p:selectOneMenu的选择项上显示图片？

Question

我正在尝试实现一个高级的 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.

谢谢你

Answer 1

你可以使用 #{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="<img height='20' src='#{resource['default:img/' += localeSIVar.language += '.svg']}' />"

注：

• 你只能在那里使用纯HTML，而不能使用JSF组件。
• 为了提高可读性，最好在纯HTML中使用单引号作为属性值的分隔符，而纯HTML又被声明为一个由双引号包围的属性。当然，你也可以使用 " 而不是这些单引号。
• 单引号在EL表达式中继续正常工作，如上图所示，不需要重新封装。你甚至可以在EL表达式中使用双引号，但代码编辑器中的语法高亮在这里容易失效，有可能造成不必要的混乱。
• 在EL表达式中的 += 操作符是EL 3.0后的新版本；如果你还在使用旧的EL版本，请前往 如何在EL中连接一个字符串？ 在EL中连接字符串的其他方法（然后将其作为一个变量重用）。