How to display multiple MySQL db blob images in a jsp page table using JSTL

Question

I have a section in my program that performs a http GET request, which displays a table with rows from my MySQL database. Whilst each cell that contains text displays fine, the Images cells of the table display an object reference and despite multiple search efforts and multiple attempts, have not been able to get this working.

My Images are stored as Blobs in DB and my row items are stored in an Object List as seen below in my 'DisplayChefRecipes.java' code. I'm accessing this with EL on the JSP page.

I don't want to use Scriplets in my JSP page for reasons stated elsewhere in Stackoverflow.

Bean Class (Just section relevant to Image)

private InputStream image;
public InputStream getImage() {
    return image;
}
public void setImage(InputStream sImage) {
    this.image = sImage;
}

DisplayChefRecipes

 public class DisplayChefRecipes extends HttpServlet {

 private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    Chef chef = new Chef();
    int chefIdString = Integer.parseInt(request.getParameter("chef_Id"));
    chef.setId(chefIdString);
    List<Object> resultSet = new ArrayList<Object>();

    // Make a connection to the database
    String url = "jdbc:mysql://localhost/traineechefdb";
    String driver = "com.mysql.jdbc.Driver";
    String user = "root";
    String password = null;

    try {
         Class.forName(driver).newInstance();
         Connection conn = (Connection) DriverManager.getConnection(url, user, password);
         System.out.println("Connection Established");      
         Class.forName("com.mysql.jdbc.Driver");

         Statement stmt = (Statement) conn.createStatement();
         String sql = "SELECT R.NAME, R.DESCRIPTION, R.PREP_TIME, R.INGREDIENTS, R.DIRECTIONS, FO.ORIGIN, FT.TYPE_NAME, R.IMAGE " +
                      "FROM RECIPE AS R " +
                        "INNER JOIN FOOD_ORIGIN AS FO " + 
                            "ON R.FOOD_ORIGIN_ID = FO.FOOD_ORIGIN_ID " +
                        "INNER JOIN FOOD_TYPE AS FT " +
                            "ON R.FOOD_TYPE_ID = FT.FOOD_TYPE_ID " +
                      "WHERE R.CHEF_ID = '" + chef.getId() + "' ";

         ResultSet rs = stmt.executeQuery(sql);

         InputStream sImage = null;

         while(rs.next()){

             Recipe recipe = new Recipe();

             recipe.setRecipeName(rs.getString("R.NAME"));
             recipe.setDescription(rs.getString("R.DESCRIPTION"));
             recipe.setPrepTime(rs.getDouble("R.PREP_TIME"));
             recipe.setIngredients(rs.getString("R.INGREDIENTS"));
             recipe.setDirections(rs.getString("R.DIRECTIONS"));
             recipe.setFoodOrigin(rs.getString("FO.ORIGIN"));
             recipe.setFoodType(rs.getString("FT.TYPE_NAME"));
             sImage = rs.getBinaryStream("R.IMAGE");
             recipe.setImage(sImage);

             resultSet.add(recipe);
             recipe.equals(null);
         }
        request.setAttribute("resultSet", resultSet);

        sImage.close();

        rs.close();
        conn.close();

        }catch(SQLException){
            e.printStackTrace();
        }
           request.getRequestDispatcher("jsp/DisplayChefRecipes.jsp").forward(request, response);
    }

DisplayChefRecipes.jsp(Table Section)

<table>
    <thead>
        <tr>
            <th>Recipe Name</th>
            <th>Food Origin</th>
            <th>Food Type</th>
            <th>Description</th>
            <th>Prep Time (Hours/mins)</th>
            <th>Ingredients</th>
            <th>Directions</th>
            <th>Image</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${resultSet}" var="row">
            <tr>
                <td>${row.recipeName}</td>
                <td>${row.foodOrigin}</td>
                <td>${row.foodType}</td>
                <td>${row.description}</td>
                <td>${row.prepTime}</td>
                <td>${row.ingredients}</td>
                <td>${row.directions}</td>
                <td>${row.image}</td> <!-- How to Display each image? -->
            </tr>
        </c:forEach>
    </tbody>
</table>

<br>

<a href="jsp/Menu.jsp">
    <button>Return to Menu</button>
</a>

score 1 · Accepted Answer · edited May 23 '17 at 11:47

1

One approach is to create a servlet that will return the image with the specified id and then just use a regular <img src="/imgserv?${row.imageid}"/> (or along those lines).

Another recent possibility is to use embedded, base64 encoded image data as described in Embedding Base64 Images. That will require you to preprocess the byte data to Base64 though, but it would avoid having to create a separate servlet for fetching the image data (not that there's anything wrong with it). Of course if you have many large images, the added overhead of the embedded base64 can become an issue.

edited May 23 '17 at 11:47

Community

1
1

answered Apr 20 '16 at 10:36

Kayaman

72,141
5
83
121

Just a note: Base64 approach is absolutely not recommended for "permanent" images. It's only useful for "temporary" images (e.g. preview/crop between upload and save). – BalusC Apr 20 '16 at 11:03
Thanks guys and i appreciate the help. Is there somewhere that you could direct me to that would make this bit more understandable? I just need to display the images and it does seem tad complex – morpheus1977 Apr 20 '16 at 11:06
The abovelinked duplicate makes it understandable to starters. – BalusC Apr 20 '16 at 11:22
Ok and thanks for your help. – morpheus1977 Apr 20 '16 at 11:41

How to display multiple MySQL db blob images in a jsp page table using JSTL

1 Answers1