Search code examples
imagejsfresourcesjsf-2.2commandbutton

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

I've learned that JSF 2.2 has some special resources mechanism that loads images from the predefined resources/ folder within my web application. That works quite well with an image like this:

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

The resulting src="..." translates to /context/javax.faces.resource/gfx/Logos/Logo.png.xhtml as expected.

I'd have thought that the same works with <h:commandButton image="..." /> – but that's not true. The resulting src="..." attribute is not translated properly.

How can I fix this? Do I really have to use a CSS background image?

Solution

  • As per the tag documentation, the <h:commandButton image> takes a (relative) URL, not a JSF resource name.

    Use the resource mapper in EL instead via #{resource['library:name']}. It'll convert a JSF resource identifier to a concrete URL.

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

    See also:

    Unrelated to the concrete problem, that thing generates a HTML <input type="image"> element which is intented as an image map which can capture mouse pointer coordinates on click. You seem to be more interested in a clickable image. In that case, better use <h:commandLink><h:graphicImage>.

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

    See also: