BLOB from MySQL not properly displayed

Question

I am quite unexperienced when it comes to web development, so I am sorry to have uploaded so much possibly unnecessary code, but i guessed better too much than too little information..

I want to display a BLOB i got from a connected MySQL Database. The BLOB is not displayed properly as an image. Instead i get it like this: enter image description here

In MySQl the BLOBs all are jpg format. I retrieve them from MySQL database with other Strings and Integers. The displaying of them works fine. I have no idea why it is not properly displayed. Hopefully you can help me!

    public class MbBrowse implements Serializable {

    private static final long serialVersionUID = 1L;

    final String SQL_SELECT = "select Vorname, Nachname, Geburtsdatum,Email, Telefon, Krankenkasse, Versicherungskarte, Einlieferung, Entlassung, Station,Diagnose, Therapie, Medikamente from stammdaten";
    final String SQL_SELECT2 = "select Vorname, Nachname, Diagnose, Therapie, Medikamente from stammdaten";

    private boolean connected = false;
    private boolean prevButtonDisabled = true;
    private boolean nextButtonDisabled = true;


    private Util util = new Util();

    private Connection con = null;
    private Statement stm = null;
    private ResultSet rs = null;
    

    private int telefon = 0;
    private String nachname = "";
    private String vorname = "";
    private Date geburtsdatum = new Date(0L);
    private String krankenkasse = "";
    private Blob versicherungskarte;
    private String email = "";

public int getTelefon() {
        return telefon;
    }

    public void setTelefon(int n) {
        telefon = n;
    }

    public String getNachname() {
        return nachname;
    }

    public void setNachname(String s) {
        nachname = s;
    }

    public String getVorname() {
        return vorname;
    }

    public void setVorname(String s) {
        vorname = s;
    }

    public String getKrankenkasse() {
        return krankenkasse;
    }

    public void setKrankenkasse(String s) {
        krankenkasse = s;

    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String s) {
        email = s;

    }

    public java.util.Date getGeburtstag() {
        return geburtsdatum;
    }

    public void setGeburtstag(java.util.Date dt) {
        if (dt != null)
            geburtsdatum = new Date(dt.getTime());
        else
            geburtsdatum = new Date(0L);
    }

    public Blob getVersicherungskarte() {
        return versicherungskarte;
    }

    public void setVersicherungskarte(Blob karte) {
        karte = versicherungskarte;
    }


    public boolean getPrevButtonDisabled() {
        return prevButtonDisabled;
    }

    public boolean getNextButtonDisabled() {
        return nextButtonDisabled;
    }

    public boolean getConnected() {
        return connected;
    }

    public void setConnected(boolean b) {
        connected = b;
    }

    /*--------------------------------------------------------------------------*/

    private void showData() throws SQLException {

        setTelefon(rs.getInt("Telefon"));
        setNachname(rs.getString("Nachname"));
        setVorname(rs.getString("Vorname"));
        setGeburtstag(rs.getDate("Geburtsdatum"));
        setKrankenkasse(rs.getString("Krankenkasse"));
        setVersicherungskarte(rs.getBlob("Versicherungskarte"));
        setEmail(rs.getString("Email"));

    }

    /*--------------------------------------------------------------------------*/

    /**
     * Verbindung zur Datenbank herstellen und disconnect button und browse buttons
     * freigeben
     * 
     * @param ae ActionEvent
     */
    public void connect(ActionEvent ae) {

        // out.println( "connect()..." );

        if (util != null)
            con = util.getCon();
        if (con != null) {
            try {
                stm = con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_UPDATABLE);
                rs = stm.executeQuery(SQL_SELECT);
                if (rs.first())
                    showData();
                connected = true;
                prevButtonDisabled = false;
                nextButtonDisabled = false;
            } catch (Exception ex) {
                FacesContext.getCurrentInstance().addMessage(null,
                        new FacesMessage(FacesMessage.SEVERITY_ERROR, "SQLException", ex.getLocalizedMessage()));
                out.println("Error: " + ex);
                ex.printStackTrace();
            }
        } else {
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR,
                    "Exception", "Keine Verbindung zur Datenbank (Treiber nicht gefunden?)"));
            out.println("Keine Verbingung zur Datenbank");
        }
    }









<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <center>

        <h:head>
            <h:outputStylesheet library="css" name="myCss.css" />
            <title>Patientenverwaltung</title>
            <meta charset="utf-8" />
        </h:head>

    </center>
</h:head>

<h:body style="background-color:#D5D8DC;">


    <h:form>

        <center>


            <h:graphicImage library="img" name="logo.png" />

            <p></p>
            <font face="Verdana" size="5">Stammdaten und Behandlungsdaten</font><br />
            <p></p>

            <h:panelGrid id="panel" columns="4" border="0" cellpadding="10"
                cellspacing="1" styleClass="text">

 
     Vorname
    <h:inputText label="Vorname" 
                    value="#{mbBrowse.vorname}" maxlength="45" />   

   
     Name 
     <h:inputText label="Name" value="#{mbBrowse.nachname}"
                    maxlength="45" /> 
                

            
     Geburtstag
    <h:inputText id="id_geburtstag" label="Geburtstag" maxlength="10"
                    value="#{mbBrowse.geburtstag}">
                    <f:convertDateTime locale="de_DE" pattern="dd.MM.yyyy" type="date"
                        dateStyle="short" timeZone="MET" />
                </h:inputText>
            
                     
    Telefon 
    <h:inputText label="Telefon" maxlength="10"
                    value="#{mbBrowse.telefon}" />
                
            
     Krankenkasse 
    <h:inputText label="Krankenkasse" maxlength="60"
                    value="#{mbBrowse.krankenkasse}" /> 
                
                            
     Email 
    <h:inputText label="Email" maxlength="60" value="#{mbBrowse.email}" /> 
                

                    
    Versicherungskarte 
     <h:graphicImage value="#{mbBrowse.versicherungskarte}"
                    style="height:100px;width:200px" />
                    
    
</h:panelGrid>

        </center>

        <h:panelGroup>
            <center>



                <p></p>
                <h:commandButton value="&lt;&lt;"
                    disabled="#{mbBrowse.prevButtonDisabled}" title="Zurück blättern"
                    style="font-size: 130%;" actionListener="#{mbBrowse.prev}" />
                &#160;&#160;

                <h:commandButton value="&gt;&gt;"
                    disabled="#{mbBrowse.nextButtonDisabled}" title="Vorwärts blättern"
                    style="font-size: 130%;" actionListener="#{mbBrowse.next}" />
                &#160;&#160;

                <h:commandButton value="Connect" disabled="#{mbBrowse.connected}"
                    actionListener="#{mbBrowse.connect}" style="font-size: 130%;" />
                &#160;&#160;

            </center>
        </h:panelGroup>

    </h:form>
    
</h:body>
</html>

Answer 1

Your Java Server Faces graphicImage tag

<h:graphicImage value="#{mbBrowse.versicherungskarte}" style="height:100px;width:200px"/>

when delivered to your users's browsers becomes

<img src="theContentOfYourBLOB" style="height:100px;width:200px"/>

But a well-formed tag looks like this:

<img src="https://some.example.com/whatever/image.jpg" style="height:100px;width:200px" />

In other words, you can't just pour a BLOB into that tag and expect it to work. You need a URL for the image there.

You can store the image into a uniquely named file in your server's static object filesystem (the filesystem from which you serve .css, .js, and other image files). Then you will put the URL for the file as the value of the <h:graphicImage ... > tag.

Or, you can use a so-called Data URL to represent your image inline. In that case you'll put a URL something like this into the value parameter.

 data:image/jpeg;base64;R0lGODblahblahblahblah

Here are some suggestions about how to do that. You basically must encode the binary data in the BLOB as Base64 and prepend data:image/jpeg; to it.

Pro tip Many web app designers don't store images in database BLOBS, but rather store them in a file system, and store their URLs in database strings. Why? Database servers often become a performance bottleneck when an application scales up. If you load them with images, they'll become even bigger bottlenecks.