Geek asks and answers

How to fill h: value of graphicImage with contents of image from database?

I have an object Imagein my ManagedBean. How can I get it on my JSF page?

This does not seem to work: <h:graphicImage value="#{userProfile.image}" />where image is the field variable in the userProfile class.

Image obtained from MySql as shown below.

int len = rs.getInt("ImageLen");
if(len != 0){
    byte[] b = new byte[len];
    InputStream in = rs.getBinaryStream("Image");
    in.read(b);
    in.close();
    this.image = Toolkit.getDefaultToolkit().createImage(b);
}

The error I got: java.lang.ClassCastException - sun.awt.image.ToolkitImage cannot be cast to java.lang.String.

+5
source share
2 answers

. JSF - HTML. HTML HTML-. <img> () URL- src, HTML-. HTML, JSF <h:graphicImage> HTML <img>, src, URL-.

<h:graphicImage value> URL. , -, servlet, URL .

, , URL- ,

<h:graphicImage value="/userProfileImageServlet?id=#{userProfile.id}" />

( , nullchecks ..), :

@WebServlet("/userProfileImageServlet")
public class UserProfileImageServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Long userProfileId = Long.valueOf(request.getParameter("id"));

        try (
            Connection connection = dataSource.getConnection();
            PreparedStatement statement = connection.prepareStatement("SELECT image, imageFileName, LENGTH(image) AS imageContentLength FROM userProfile WHERE id=?");
        ) {
            statement.setLong(1, userProfileId);

            try (ResultSet resultSet = statement.executeQuery()) {
                if (resultSet.next()) {
                    response.setContentType(getServletContext().getMimeType(resultSet.getString("imageFileName")));
                    response.setContentLength(resultSet.getInt("imageContentLength"));
                    response.setHeader("Content-Disposition", "inline;filename=\"" + resultSet.getString("imageFileName") + "\"");

                    try (
                        ReadableByteChannel input = Channels.newChannel(resultSet.getBinaryStream("image"));
                        WritableByteChannel output = Channels.newChannel(externalContext.getResponseOutputStream());
                    ) {
                        for (ByteBuffer buffer = ByteBuffer.allocateDirect(10240); input.read(buffer) != -1; buffer.clear()) {
                            output.write((ByteBuffer) buffer.flip());
                        }
                    }
                }
            } else {
                response.sendError(HttpServletResponse.SC_NOT_FOUND);
            }
        } catch (SQLException e) {
            throw new ServletException("Something failed at SQL/DB level.", e);
        }
    }

}

JSF OmniFaces JSF 2.2 + CDI, <o:graphicImage>, .

<o:graphicImage value="#{userProfileImageBean.getBytes(userProfile.id)}" />


@Named
@ApplicationScoped
public class UserProfileImageBean {

    public byte[] getBytes(Long userProfileId) {
        try (
            Connection connection = dataSource.getConnection();
            PreparedStatement statement = connection.prepareStatement("SELECT image FROM userProfile WHERE id=?");
        ) {
            statement.setLong(1, userProfileId);

            try (ResultSet resultSet = statement.executeQuery()) {
                if (resultSet.next()) {
                    return resultSet.getBytes("image");
                }
            } else {
                return null;
            }
        } catch (SQLException e) {
            throw new FacesException("Something failed at SQL/DB level.", e);
        }
    }

}

URI , dataURI="true":

<o:graphicImage value="#{userProfileImageBean.getBytes(userProfile.id)}" dataURI="true" />

. :

+6

, : Base64.

, , , ( , ). :

  • Base64 , 33% . ( , HTTP-, , IF , ~ 33% , HTTP-.)
  • - "data:...", .
  • HTML , , , , . ... ( , CSS - , - IF, CSS - ).

( . google):

, :

Facelet <h:graphicImage>:

<h:graphicImage id="myimageid" value="${myBean.imgContentsBase64}" />

... bean MyBean :

private String imgContentsBase64; // including g/setter

imgContentsBase64 : "data:{MIME_TYPE};base64,{BASE64_ENCODED_CONTENTS}".

:

  • {MIME_TYPE}, . image/png, image/jpg ..
  • {BASE64_ENCODED_CONTENTS} - , .

( , , ).

, java.util.Base64.getUrlEncoder() ( .getEncoder() .getMimeEncoder(), , , ). , Base64.Encoder.encodeToString() byte[] ( ) String ( bean). API / google , , .

, , , ( , , Ajax). , , , , imgContentsBase64 Ajax ( ..), render myimageid.

0

More articles:


All Articles