title: how to display an image from mysql database on a jsp page?
body: <p>I want to display an image that is stored in a MySQL database. To retrieve the image, I am using a servlet. Please tell me how to display it in a jsp page. This is the flow:</p>
  
  <pre><code>login.html ---&gt; dologin.jsp
  </code></pre>
  
  <p>login.html and the servlet are nearly ready. Please tell me how to finish dologin.jsp.</p>
  
  <p>login.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl,
    dt, dd, ol, ul, li, table, tr, td, form, object, embed,
    article, aside, command, details, fieldset,
    figcaption, figure, footer, group, header, hgroup, legend
  {
    margin: 0;
    padding: 0;
    border: 0;
  }
  html {
    font: 82.5% verdana, helvetica, sans-serif;
    background: #fff;
    color: #333;
    line-height: 1;
    direction: ltr;
  }
  html, body {
    position: absolute;
    height: 100%;
    min-width: 100%;
  }   
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  
  .signin-header {
    padding: 10px 12px 5px;
    background:#00AAFF;
    border: 1px solid #e5e5e5;
    width: 362px;
    float: right;
  }
  .signin-box {
    padding: 20px 25px 15px;
    background:#DEDEDE;
    border: 1px solid #e5e5e5;
    width: 335px;
    float: right;
  }
  
  .button {
    min-width: 46px;
    text-align: center;
    color: #444;
    font-size: 11px;
    font-weight: bold;
    height: 27px;
    padding: 0 8px;
    line-height: 27px;
    border-radius: 2px;
    transition: all 0.218s;
    border: 1px solid #dcdcdc;
    background-color: #f5f5f5;
    cursor: default;
  }
  
  *+html .button {
    min-width: 70px;
  }
  
  button.button,
  input[type=submit].button {
    height: f1f1f1px;
    line-height: 29px;
    vertical-align: bottom;
    margin: 0;
  }
  
  .button:hover {
    border: 1px solid #c6c6c6;
    color: #333;
    text-decoration: none;
    transition: all 0.0s;
    background-color: #f8f8f8;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  }
  .button:active {
    background-color: #f6f6f6;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  }
  .button:visited {
    color: #666;
  }  
  .button-submit {
    border: 1px solid #3079ed;
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    background-color: #4d90fe;
  }
  .button-submit:hover {
    border: 1px solid #2f5bb7;
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,0.3);
    background-color: #357ae8;
  }
  button-submit:active {
    background-color: #357ae8;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  }
  
  .footer-bar {
    position: absolute;
    bottom: 0;
    height: 35px;
    width: 100%;
    border-top: 1px solid #ebebeb;
    overflow: hidden;
  }
  .footer {
    padding-top: 9px;
    font-size: .85em;
    white-space: nowrap;
    line-height: 0;
  }
  .footer ul {
    color: #999;
    float: left;
    max-width: 80%;
  }
  .footer ul li {
    display: inline;
    padding: 0 1.5em 0 0;
  }
  .footer a {
    color: #333;
  }
  .footer .lang-chooser-wrap {
    float: right;
    max-width: 20%;
  }
  .footer .lang-chooser-wrap img {
    vertical-align: middle;
  }
  .footer .attribution {
    float: right;
  }
  .footer .attribution span {
    vertical-align: text-top;
  }
  .content {
    padding: 0 44px;
  }
  
  .table {
    padding: 0 55px
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  function ccheck()
  {
  uid=document.f1.uid.value;
  cpass=document.f1.cpass.value;
  
  if(uid=="" || uid==null)
  {
  alert("Plz. Enter Your User ID");
  document.f1.uid.focus();
  return false;
  }
  if(cpass=="" || cpass==null)
  {
  alert("Plz. Enter Your Password");
  document.f1.cpass.focus();
  return false;
  }
  return true;
  }
  &lt;/script&gt;
  &lt;title&gt;Login Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body onload="document.f1.uid.focus()" style="background-image:url('medical.jpg');background-position: center"&gt;
      &lt;form id="f1" name="f1" action="doDelete.jsp" method="get" onsubmit="return ccheck()"&gt;
  
          &lt;img src="header.png"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;table&gt;&lt;tr&gt;&lt;td&gt;
              &lt;table class="table"&gt;&lt;tr&gt;&lt;td&gt;
                  &lt;table class="table"&gt;&lt;tr&gt;&lt;td&gt;
                      &lt;div class="content"&gt;&lt;div class="signin-header"&gt;&lt;h3&gt;Welcome to DiaEmr&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;
                      &lt;div class="content"&gt;
                      &lt;div class="signin-box"&gt;
                      &lt;p class="one"&gt;
                          Welcome to all at the &lt;b&gt;"Workshop on Ileal Interposition".&lt;/b&gt;&lt;br&gt;
  
                          &lt;b&gt;Brazil&lt;/b&gt; to inaugurate &amp; launch this very important Data Registry&lt;br&gt;
                          Key features of the solution-&lt;br&gt;
                      &lt;/div&gt;  
                  &lt;/div&gt;
              &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
          &lt;/td&gt;
          &lt;td&gt;image&lt;/td&gt;
          &lt;td&gt;
              &lt;table class="table"&gt;&lt;tr&gt;&lt;td&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="signin-header"&gt;
                          &lt;h3&gt;Portal Login&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;
                  &lt;div class="content"&gt;
                      &lt;div align="center" class="signin-box"&gt;
                          &lt;table class="table"&gt;&lt;tr&gt;&lt;td&gt;
                              &lt;b&gt;User ID&lt;/b&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input name="uid" type="text" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;
                              &lt;b&gt;Password&lt;/b&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input name="cpass" type="password" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input type="submit" class="button button-submit" value="Submit" /&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input type="reset" class="button button-submit" value="Reset" /&gt;&lt;/td&gt;
                          &lt;tr&gt;New User&lt;a href ="UserRegistration.jsp"&gt;Register&lt;/a&gt;&lt;/tr&gt;&lt;br&gt;
                          &lt;/tr&gt;&lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
          &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
      &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
      &lt;div class="footer-bar"&gt;
          &lt;img align="left" src="footer.png"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>servlet</p>
  
  <pre><code>import java.sql.*;
  import DB.DataBaseConnection;
  
  import java.io.IOException;
  import java.io.InputStream;
  
  import javax.servlet.ServletException;
  import javax.servlet.ServletOutputStream;
  import javax.servlet.annotation.WebServlet;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  
  /**
   * Servlet implementation class imagetestServlet
   */
  @WebServlet("/imagetestServlet")
  public class imagetestServlet extends HttpServlet {
  
      private static final long serialVersionUID = 1L;
  
      /**
       * @see HttpServlet#HttpServlet()
       */
      public imagetestServlet() {
          super();
          // TODO Auto-generated constructor stub
      }
  
      /**
       * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
       */
      public void doGet(HttpServletRequest request, HttpServletResponse response) 
                throws IOException,ServletException {
  
                   Blob image = null;
                    Connection con = null;
                    Statement stmt = null;
                    ResultSet rs = null;
                    DataBaseConnection db= new DataBaseConnection();
                    ServletOutputStream out = response.getOutputStream();
                    try {
                    Class.forName("com.mysql.jdbc.Driver");
                    con=db.connet();
                    stmt = con.createStatement();
                    rs = stmt.executeQuery("select img from one where  id = '4'");
                    if (rs.next()) {
                    image = rs.getBlob(1);
                    } else {
                    response.setContentType("text/html");
  
                    out.println("&lt;font color='red'&gt;image not found for given id&lt;/font&gt;");
  
                    return;
                    }
                    response.setContentType("image/gif");
               InputStream in = image.getBinaryStream();
                int length = (int) image.length();
                int bufferSize = 1024;
                byte[] buffer = new byte[bufferSize];
                while ((length = in.read(buffer)) != -1) {
                out.write(buffer, 0, length);
                }
                in.close();
                out.flush();
  
              } catch (Exception e) {
                response.setContentType("text/html");
                out.println("&lt;html&gt;&lt;head&gt;&lt;title&gt;Unable To Display image&lt;/title&gt;&lt;/head&gt;");
                out.println("&lt;body&gt;&lt;h4&gt;&lt;font color='red'&gt;Image Display Error=" + e.getMessage() +
                 "&lt;/font&gt;&lt;/h4&gt;&lt;/body&gt;&lt;/html&gt;");
                return;
                } 
      }
  
      /**
       * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
       */
      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          // TODO Auto-generated method stub
      }
  
  }
  </code></pre>