web-dev-qa-db-fra.com

Comment afficher une image depuis la base de données mysql en utilisant spring mvc

Je stocke l'image de type BLOB dans la base de données MySQL avec Spring MVC pour la classe d'élément Item (itemId, ItemName, itemPrice, itemContent, itemImage). J'ai stocké avec succès l'image dans la base de données, mais lorsque j'essaie de l'afficher dans mon jsp, elle affiche quelque chose de binaire comme [B @ 7fb0c025.

Comment afficher une image correcte dans JSP (l'image est stockée dans la table de la base de données MySQL)

Ma classe de modèle:

@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" pour ajouter des attributs d'élément avec l'image dans la base de données.

<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>

La page JSP pour afficher les attributs d’élément avec l’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>

Comment puis-je afficher correctement l'image qui est stockée dans la base de données? Je suppose que je me trompe en affichant une image comme celle-ci dans JSP . Mais comment puis-je afficher l'image ici dans JSP?

imagehibernatejspspring-mvccontroller
10
bablu

Je suis enfin capable d'afficher l'image sur mon jsp . Ce que j'ai fait.

J'ai créé séparément un contrôleur comme celui-ci. 

@Controller
@RequestMapping("/myImage")
public class ImageController {

@Resource(name="categoryService")
private CategoryService categoryService;

@Resource(name="itemService")
private ItemService itemService;

@RequestMapping(value = "/imageDisplay", method = RequestMethod.GET)
  public void showImage(@RequestParam("id") Integer itemId, HttpServletResponse response,HttpServletRequest request) 
          throws ServletException, IOException{


    Item item = itemService.get(itemId);        
    response.setContentType("image/jpeg, image/jpg, image/png, image/gif");
    response.getOutputStream().write(item.getItemImage());


    response.getOutputStream().close();

et dans le jsp je l'ai fait

<img src="/Project1/myImage/imageDisplay?id=${item.itemId}"/>

Et l'image a été affichée avec succès.

24
bablu

J'ai écrit le code ci-dessous dans mon contrôleur et cela fonctionne très bien pour moi.

Dans mon projet, l'utilisateur contient l'objet Profil qui a la photo @Lob . Modifiez ce code en fonction de vos attributs.

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

Dans le fichier JSP, j'ai écrit le code

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

Pour cela, vous avez besoin du fichier jar codec commun.

En outre, vous pouvez utiliser une balise personnalisée pour afficher une image.

6
Musaddique

Une dernière chose que vous pouvez faire pour afficher l’image dans jsp à partir de la base de données . Supposons que vous ayez besoin d’afficher les images de tous les utilisateurs dans jsp . Pour cela, vous pouvez créer votre propre balise custome jstl contenant le code permettant de convertir une image en octets. à l'image base64.

ici dans mon projet l'image est en classe de profil 

i.e user.getProfile (). getPhoto ()

    package com.spring.tags;

import Java.io.IOException;
import Java.io.UnsupportedEncodingException;
import Java.text.SimpleDateFormat;
import Java.util.Date;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.SimpleTagSupport;
import javax.servlet.jsp.tagext.TagSupport;

import org.Apache.commons.codec.base64.Base64;

public class UserImage extends SimpleTagSupport {

    private byte[] usrImage;

    public void setUsrImage(byte[] usrImage) {
        this.usrImage = usrImage;
    }

@Override
    public void doTag() throws JspException, IOException {
        System.out.println("tag lib");
        try {
            JspWriter out = getJspContext().getOut();
            if (usrImage != null && usrImage.length > 0) {
                byte[] encodeBase64 = Base64.encode(usrImage);
                String base64Encoded = new String(encodeBase64, "UTF-8");
                out.print("data:image/jpeg;base64,"+base64Encoded);

            }
        } catch (Exception e) {
            throw new JspException("Error: " + e.getMessage());     }
    }   
}

créer un fichier tld dans WebContent. j'ai créer un fichier dans mon dossier taglib

<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.0" xmlns="http://Java.Sun.com/xml/ns/j2ee" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://Java.Sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd">
  <tlib-version>1.0</tlib-version>
    <short-name>ui</short-name>
    <uri>/taglib/userimage</uri>
    <tag>
        <name>image</name>
        <tag-class>com.spring.tags.UserImage</tag-class>
        <body-content>empty</body-content>
        <info>This Tag Displayes current user profile image</info>
        <attribute>
            <name>usrImage</name>
            <required>true</required>
            <description>Provide a display format</description>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
    </tag>
</taglib>

Vous pouvez maintenant écrire du code dans jsp pour afficher une image. 

<img src="<ui:image usrImage='${user.profile.photo}' />

Chaque fois que vous n'avez pas besoin de convertir une image dans le contrôleur, passez simplement une image d'octet à jsp. Notre balise custome convertit l'image d'octet et la affiche dans la page d'affichage.

Remarque: inclure le fichier de balise custome dans le fichier jsp 

<%@ taglib uri="/taglib/userimage.tld" prefix="ui"%>
1
Musaddique

Cependant, j’utilisais une requête native pour obtenir le ArrayList <>, je ne pouvais donc pas utiliser la méthode setter et getter dans mon contrôleur pour obtenir les octets à encoder en Base64; et cela a fonctionné.

Dans mon dao

    @Transient
private String imgUtility;


//getter method for encoding
public String getImgUtility() throws UnsupportedEncodingException {

    byte[] encodeBase64 = Base64.encodeBase64(getImage());
     String base64Encoded = new String(encodeBase64, "UTF-8");              
    return base64Encoded;
}

et dans la vue jsp, vous pouvez le faire

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

0
Devraj Giri