<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 资源名称。

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

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

另见：

• How to reference CSS / JS / image resource in Facelets template?

---

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

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

另见：

• Change the image of a JSF commandbutton with DHTML event onmouseover