1

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?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Daniel Bleisteiner
  • 3,190
  • 1
  • 33
  • 47

1 Answers1

4

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:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555