如何在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属性，我可以用来在itemLabel中输出<img>标签，但我不知道我会在它的src上放什么。

谢谢

Answer 1

您可以使用#{resource['library:name']}语法打印资源的 URL，如如何在 Facelet 模板中引用 CSS/JS/图像资源？

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

<h:graphicImage library="default" height="20" name="img/#{localeSIVar.language}.svg" />

在itemLabel中，并且<f:selectItems>的itemLabelEscaped属性设置为true，则可以使用以下语法作为itemLabel的值：

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

笔记：

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