0

How can I add an image via style class inside a h:outputText ? Below is my code :

<h:outputText styleClass="postprocessedtick" rendered="#{filteredDump.postProcessed == 'YES'}" />

and the styleclass is as :

.postprocessedtick
{
    background-image: url(resources/images/yes.png);
    height: 25px;
    width: 25px;
}

I know primefaces provides a p:graphicimage tag as well but for some reason that I can't explain here, I need to do it in a outputText. I checked in the inspect element, I can see the style class applied to it as well the image link is also fine. I tried using !important as well but doesn't work.

Hello Man
  • 693
  • 2
  • 12
  • 29
  • @BalusC that didn't work I tried to change to #resources and rest similarly but the image simply doesn't load. – Hello Man Jun 05 '16 at 14:37
  • What's being returned instead as response to the image request? – BalusC Jun 05 '16 at 15:23
  • How do I find the response? I can see in Inspect Element that the img link is there and when I hover over it, the image appears, one other question @BalusC can I use the image inside a primefaces datatable and make the image clickable? – Hello Man Jun 05 '16 at 16:00
  • Press F12 and open Network tab to see webbrowser's HTTP traffic monitor. If the image is delivered successfully, then your problem is caused elsewhere. E.g. the element isn't a block level element. The `` renders by default a span which is an inline level element. You'd need to apply CSS `display:block` on it, or to replace it by e.g. `
    `. CSS width/height have only effect on HTML block level elements.
     – BalusC Jun 05 '16 at 20:32

0 Answers0