jsf - 如何在 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? 中所示

所以，考虑到您实际上想使用

<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 中连接字符串的替代方法(然后将其重新用作变量)。