Question

如何将数据库中的图像用作CSS背景图像？我可以从资源库（文件）中获取图像，但不能从DB中获取图像。

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

资源[imageBean.getImage（）。<击>使用getURL（）

有没有办法可以获取imageBean中图像的URL？

我使用应用程序范围的bean显示数据库映像： Displaying images from MySQL database in JSF datatable

Answer 1

使用普通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}"); 
}

另见：

Load images from outside of webapps / webcontext / deploy folder using <h:graphicImage> or <img> tag

Answer 2

9个月没有回应，我认为没有干净的方法。

使用jQuery的解决方法：

通过bean从DB获取图像并使用css隐藏它：

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

然后获取图像的路径并设置background-image属性：

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

欢迎任何改进或建议。

来自数据库的CSS背景图像

2 个答案:

另见：