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

【问题标题】：How to show image on selected item of p:selectOneMenu如何在 p:selectOneMenu 的选定项目上显示图像
【发布时间】：2020-10-07 18:54:42
【问题描述】：

我正在尝试实现高级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 属性，我可以用它在itemLabel 中输出<img> 标签，但我不知道我会在它的src 上放什么。

谢谢

【问题讨论】：

从某处放置静态图像是否有效？我不希望它包含html。你试过了吗？
@Kukeltje 你是说在itemLabel 里面吗？如果是这样，是的，我只是尝试将以下内容放在那里，并且有效。 itemLabel="&lt;img src='https://someurl/icon.png' height='20' /&gt;"

标签： jsf primefaces selectonemenu

【解决方案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内，并且<f:selectItems>的itemLabelEscaped属性设置为true，则可以使用以下语法作为itemLabel的值：

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

注意事项：

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

【讨论】：