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

debugcn 发表于 Dev

Reidestis

我正在尝试实现一个高级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>tag itemLabel，但是我不知道该放在那个属性上src。

谢谢

BalusC

您可以使用#{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中将单引号用作属性值分隔符，然后将其声明为双引号包围的属性。当然，您也可以使用"而不是这些单引号。
如上所述，单引号在EL表达式中仍然可以正常工作，无需重新转义。您甚至可以在EL表达式中使用双引号，但是代码编辑器中的语法突出显示此处很容易失败，从而可能导致不必要的混乱。
+=从EL 3.0开始，该操作员是新手。如果您仍在使用旧版本的EL，请转到如何在EL中连接字符串？在EL中串联字符串的替代方法（然后将其重新用作变量）。