1

How can I use an image from a database as a CSS background-image? I can get an image from the resource library (file), but not the DB.

<h:outputStylesheet>
   body {
      background-image:url("#{resource[imageBean.getImage().getUrl()]}"); 
   }
</h:outputStylesheet>

resource[imageBean.getImage().getUrl()

Is there a way I can get the URL of the image that is in the imageBean?

I display DB images using an application scoped bean: Displaying images from MySQL database in JSF datatable

Community
  • 1
  • 1
Max
  • 1,107
  • 12
  • 24
  • I have stored image in database as `blob` and for displaying I used image servlet (very similar to BalusC solution). On page it is displayed via `graphicImage` like this ``. It is not CSS solution, but it works fine for dynamic images in JSF application. – Vasil Lukach Apr 10 '14 at 21:44

2 Answers2

2

Use a normal servlet.

@WebServlet("/image")
public class ImageServlet extends HttpServlet {

    @EJB
    private ImageService service;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Image image = service.find(request.getParameter("id"));
        response.setContentType(image.getContentType());
        response.setContentLength(image.getContent().length);
        response.setHeader("Content-Disposition", "inline;filename=\"" + URLEncoder.encode(image.getFilename(), "UTF-8") + "\"");
        response.getOutputStream().write(image.getContent());
    }

}

body {
   background-image:url("#{request.contextPath}/image?id=#{bean.imageId}"); 
}

See also:

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

With no response for 9 months I assume there is no clean way of doing this.

Workaround using jQuery:

Get the image from the DB via a bean and hide it with css:

<p:graphicImage styleClass="backgroundImage" style="display:none;" value="#{imageBean.image}">
    <f:param name="imageID" value="12" />
</p:graphicImage>

Then get the path to the image and set the background-image property:

<script>
    if ($('.backgroundImage')) {
        var bgImageSrc = $('.backgroundImage').prop('src');
        $('body').css("background-image", "url(" + bgImageSrc + ")");
    }
</script>

Any improvements or suggestions are welcome.

Max
  • 1,107
  • 12
  • 24