web-dev-qa-db-ja.com

Spring MVCを使用してMySQLデータベースから画像を表示する方法

アイテムクラスアイテム（itemId、itemName、itemPrice、itemContent、itemImage）にSpring MVCを使用して、BLOBタイプのイメージをMySQLデータベースに保存しています。画像をデータベースに正常に保存しましたが、jspに表示しようとすると、[B @ 7fb0c025。

JSPで適切な画像を表示するにはどうすればよいですか（画像はMySQLデータベーステーブルに保存されます）

私のモデルクラス：

@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」は、データベース内の画像とともにアイテム属性を追加します。

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

画像とともにアイテムの属性を表示するJSPページ。 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>

データベースに保存されている画像を適切に表示するにはどうすればよいですか？ JSPでこのような画像を表示することで、私はそれを間違っていると思います。しかし、JSPでここに画像を表示するにはどうすればよいですか？

imagehibernatejspspring-mvccontroller
10
bablu

ようやく画像をjspに表示できるようになりました。私がしたこと。

このようなコントローラーを別途作成しました。

@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();

そしてJSPで私はこれをやった

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

そして、画像は正常に表示されました。

26
bablu

コントローラーに以下のコードを書いてみましたが、問題なく動作しています。

私のプロジェクトでは、ユーザーには写真@Lobを持つプロファイルオブジェクトが含まれています。属性に従ってこのコードを変更します。

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

JSPファイルで、コードを記述しました

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

これには、共通コーデックjarが必要です。

また、カスタムタグを使用して画像を表示することもできます。

6
Musaddique

データベースから画像をjspで表示するためにできるもう1つのこと。 jspですべてのユーザーの画像を表示する必要があるとします。このために、バイト画像をbase64画像に変換するためのコードを含む独自のカスタムjstlタグを作成できます。

ここの私のプロジェクトでは、画像はプロファイルクラスにあります

つまり、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());     }
    }   
}

webContentにtldファイルを作成します。 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>

これで、画像を表示するためのコードをjspで記述できます。

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

コントローラーで画像を変換する必要がないたびに、バイト画像をjspに渡すだけで、customeタグがバイト画像を変換してビューページに表示します。

注：カスタムタグファイルをjspファイルに含める

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

ただし、ネイティブクエリを使用してArrayList <>を取得していたため、コントローラーでsetterメソッドとgetterメソッドを使用してBase64にエンコードするバイトを取得できず、代わりにDaoクラスに@Transientフィールドを作成してbase64にエンコードしましたそしてそれは働いた。

私の道中

    @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;
}

そしてjspビューではこれを行うことができます

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