How to display image from mysql database using spring mvc

Question

I am storing BLOB type image in MySQL database using Spring MVC for item class Item (itemId, itemName, itemPrice, itemContent, itemImage). I successfully stored image in database but when I'm trying to display it in my jsp, it is showing something binary like [B@7fb0c025.

How can I display proper image in JSP (image is stored in MySQL database table)

My model class:

@Entity
@Table(name="item")
public class Item {

@Id
@Column(name="ItemId")
@GeneratedValue
private Integer itemId;

@Column(name="ItemName")
private String itemName;

@Column(name="ItemContent")
private String itemContent;
/*
@Column(name="ItemImage")
private ByteArray ItemImage;
*/
@Column(name="ItemPrice")
private int itemPrice;

@Column(name="ItemImage")
private byte[] itemImage;

"addItem.jsp" to add item attributes along with the image in database.

<form:form modelAttribute="itemAttribute" enctype="multipart/form-data" method="POST" action="${Url}">
<table>

    <tr>
        <td><form:label path="itemId"></form:label></td>
        <td><form:input path="itemId" type="hidden"/></td>
    </tr>

    <tr>
        <td><form:label path="itemName">ItemName:</form:label></td>
        <td><form:input path="itemName"/></td>
    </tr>
    <tr>
        <td><form:label path="itemPrice">ItemPrice:</form:label></td>
        <td><form:input path="itemPrice"/></td>
    </tr>
    <tr>
        <td><form:label path="itemContent">ItemContent:</form:label>
        <td><form:input path="itemContent"/>
    </tr>
    <tr>
        <form:label for="itemImage" path="itemImage">itemImage:</form:label>
        <form:input path="itemImage" type="file" />
    </tr>
</table>

<input type="submit" value="Save" />
</form:form>

The JSP page to display item attributes along with the image. CategoryId:

    <tr>
        <td><form:label path="categoryName">CategoryName:</form:label></td>
        <td><form:input path="categoryName"/></td>
    </tr>
</table>
<input type="submit" value="Save" />

<table width: 100%; text-align:center">
<tr>
    <th>ItemId</th>
    <th>ItemName</th>
    <th>ItemPrice</th>
    <th>ItemFeatures</th> 
    <th>Edit</th>
    <th>Delete</th>
    <th>ItemImage</th>
</tr>
<tbody>


    <c:forEach items="${categoryAttribute.item}" var="item">
    <tr>
            <c:url var="editCUrl" value="/item/edit?bid=${categoryAttribute.categoryId}&cid=${item.itemId}" />
            <c:url var="deleteCUrl" value="/item/delete?id=${item.itemId}" />
            <td><c:out value="${item.itemId}" /></td>
            <td><c:out value="${item.itemName}"/></td>
            <td><c:out value="${item.itemPrice}"/></td>
            <td><c:out value="${item.itemContent}"/></td>
            <td><a href="${editCUrl}">EditItem</a></td>
            <td><a href="${deleteCUrl}">DeleteItem</a></td>
            <td><c:out value="${item.itemImage}"/></td>
    </tr>   
    </c:forEach>

How can I properly display the image which is stored in the database? I guess I'm doing it wrong by displaying image like this in JSP. But how can I display the image here in JSP?

Answer 1

I wrote below code in my controller and it's working fine for me.

In my project, User contain Profile Object which has photo @Lob. Modify this code as per your attributes.

    byte[] encodeBase64 = Base64.encode(user.getProfile().getPhoto());
    String base64Encoded = new String(encodeBase64, "UTF-8");
    mav.addObject("userImage", base64Encoded );

In JSP file, I wrote code

<img src="data:image/jpeg;base64,${userImage}" />

For this, you require common-codec jar.

Also, you can use a custom tag for showing image.