<h:commandButton image="..." /> 指定 JSF 资源名称时未正确呈现

Question

我了解到 JSF 2.2 有一些特殊的资源机制，可以从我的 Web 应用程序中预定义的 resources/ 文件夹加载图像。这对这样的图像非常有效：

<h:graphicImage name="gfx/Logos/Logo.png" alt="Logo" title="Logo" styleClass="logo" />

结果 src="..." 按预期转换为 /context/javax.faces.resource/gfx/Logos/Logo.png.xhtml。

我原以为 <h:commandButton image="..." /> 也是如此 – 但事实并非如此。生成的 src="..." 属性未正确翻译。

我该如何解决这个问题？我真的必须使用 CSS 背景图片吗？

Answer 1

根据 tag documentation，<h:commandButton image> 采用（相对）URL，而不是 JSF 资源名称。

通过 #{resource['library:name']} 使用 EL 中的资源映射器。它将 JSF 资源标识符转换为具体的 URL.

<h:commandButton ... image="#{resource['gfx/Logos/Logo.png']}" />

与具体问题无关，那个东西会生成一个 HTML <input type="image"> 元素，它的目的是作为一个图像映射，可以捕获鼠标指针坐标点击。您似乎对可点击的图像更感兴趣。在那种情况下，最好使用 <h:commandLink><h:graphicImage>.

<h:commandLink ...>
    <h:graphicImage name="gfx/Logos/Logo.png" />
</h:commandLink>

<h:commandButton image="..." /> not rendered properly when specifying JSF resource name