DBにある画像を画面に出力したい

Question

コントローラー

package com.example.konkatsu.web;

import java.io.IOException;
import java.util.List;

import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.example.konkatsu.domain.Profile;
import com.example.konkatsu.service.LoginUserDetails;
import com.example.konkatsu.service.ProfileService;


@Controller
@RequestMapping("konkatsu")   //「URL」の接頭辞をkonkatsuに設定(このクラスで呼ばれたpostなどは/konkatsu/(path)となる)

public class KonkatsuController {
	@Autowired
	ProfileService profileService;

	@ModelAttribute  //@ModelAttributeを付けたメソッド内でProfileFormを初期化
	//@ModelAttributeがついたメソッドは、@PostMappingでマッピングされたメソッドの前に実行され
	  //「返り値」は自動で「Model」に追加される（この例だと「list」や「create」メソッドが呼ばれる前に「model.addAttribute(new ProfileForm())」相当の処理が行われる）
	 ProfileForm setUpForm() {
	        return new ProfileForm();
	 }



	@GetMapping   //pathの指定がない場合は URL は/konkatsu
	public String myPage(@AuthenticationPrincipal LoginUserDetails userDetails) {
        return "konkatsu/myPage";
    }


	@GetMapping(path = "profileForm")   //pathの指定がない場合は URL は/konkatsu
	String list(Model model){  //SpringMVCでは画面に値を渡す為にModelオブジェクトを使用
		List<Profile> profile = profileService.findAll();
		model.addAttribute("profile", profile);  //第一引数はThymeleafで取り出す時に使う名前、第二引数はThymeleafに渡したいオブジェクトを指定
		return "konkatsu/profileForm";   //遷移する画面の名前
	}



	//th:action="@{/konkatsu/createProfile}" の処理
	@PostMapping(path = "createProfile")   //URLが  /konkatsu/createProfile となる
	public String create(@Validated ProfileForm form, BindingResult bindingResult, Model model,
			// 送信されたフォームの入力チェックを行う為に@Validatedアノテーションを付ける。
			// これによりProfileFormに設定したBean Validationアノテーションが評価され、結果が隣の引数のBindingResultに格納される
			@AuthenticationPrincipal LoginUserDetails userDetails) throws IOException{
		//@AuthenticationPrincipalをつけることでログイン中の[LoginUserDetails]オブジェクトを取得できる

		System.out.println(form.getId());
		System.out.println(form.getName());
		System.out.println(form.getGenderId());
		System.out.println(form.getBirthday());
		System.out.println(form.getHeight());
		System.out.println(form.getOccupationId());
		System.out.println(form.getIncome());
		System.out.println(form.getText());
		System.out.println(form.getFile());

		if (bindingResult.hasErrors()){    //入力チェックの結果を確認し、エラーがある場合は一覧画面表示に戻る
			System.out.println("エラー");
			return list(model);
		}


		Profile profile = new Profile();
		profile.setId(form.getId());
		profile.setName(form.getName());
		profile.setGenderId(form.getGenderId());
		profile.setBirthday(form.getBirthday());
		profile.setHeight(form.getHeight());
		profile.setOccupationId(form.getOccupationId());
		profile.setIncome(form.getIncome());
		profile.setText(form.getText());
		MultipartFile uploaded = form.getFile();
		byte[] image = uploaded.getBytes();   //アップロードファイルをbyte配列で取得
		profile.setImage(image);

		BeanUtils.copyProperties(form, profile);//ProfileFormをProfileにコピーする
		profileService.create(profile, userDetails.getUser());   //ProfileをDBに追加する  （ログインユーザー情報も）

		return "/konkatsu/profileConfirm";

	}

	@GetMapping(path = "manList")   //pathの指定がない場合は URL は/konkatsu
	String manList(@RequestParam Integer id, Model model){  //htmlからidとして送られた値を@RequestParamにて取得SpringMVCでは画面に値を渡す為にModelオブジェクトを使用
		List<Profile> profile = profileService.findUser(id);
		model.addAttribute("profile", profile); //第一引数はThymeleafで取り出す時に使う名前、第二引数はThymeleafに渡したいオブジェクトを指定
		return "konkatsu/profileList";   //遷移する画面の名前
	}

	@GetMapping(path = "myProfile")   //pathの指定がない場合は URL は/konkatsu
	String MyList(@RequestParam Integer id, Model model){  //SpringMVCでは画面に値を渡す為にModelオブジェクトを使用
		Profile profile = profileService.findOne(id);
		model.addAttribute("profile", profile);  //第一引数はThymeleafで取り出す時に使う名前、第二引数はThymeleafに渡したいオブジェクトを指定
		return "konkatsu/myProfile";   //遷移する画面の名前
	}

}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>婚活サイト</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}"/>
</head>

<body th:with="user=${#authentication.principal.user}">
   <!-- authenticationで認証ユーザー情報にアクセスできる 、principalプロパティでUserDetailsオブジェクトにアクセスできるので、user.mailでログインユーザー名が分かる-->

	<h2>
    	<span th:text="${user.mail}">メアド</span>
	  	さん、Myプロフィール
    </h2>


 <table class="table table-striped table-bordered table-condensed">

		<tr>
		<th>名前</th>
		<th>性別</th>
		<th>誕生日</th>
		<th>身長(cm)</th>
		<th>職業</th>
		<th>年収(万円)</th>
		<th>自己紹介</th>
		<th>メールアドレス</th>
		<th>画像</th>
		</tr>


         	<tr>

            <td th:text="${profile.name}">山田</td>
            <td th:text="${profile.gender.gender}">山田</td>
            <td th:text="${profile.birthday}">仮</td>
            <td th:text="${profile.height}">仮</td>
            <td th:text="${profile.occupation.occupationName}">仮</td>
            <td th:text="${profile.income}">仮</td>
            <td th:text="${profile.text}">仮</td>
            <td th:text="${profile.user.mail}">duke</td>  <!-- 「profile」オブジェクトがもつ「user」の「mail」を表示 -->

----------------------------------
            <td> <img th:src="${profile.image}"/></td>
-----------------------------------
        </tr>
    </table>




     <form  th:action="@{/konkatsu/manList}" method="get">
    <input type="hidden" name="id" th:value="${profile.genderId}" />
    <button type="submit" class="btn btn-lg btn-primary btn-block">登録ユーザー一覧を見る</button>
    </form>


	<form th:action="@{/logout}" method="post">
    <input type="submit" class="btn btn-lg btn-primary btn-block" value="ログアウト" />
    </form>

</body>
</html>

MultipartFileで取得した画像を
byte[] image = uploaded.getBytes();
でバイト配列にしDBに保存しました

そのDBにある画像データを画面上に表示したいです

<td> <img th:src="${profile.image}"/></td>

とコントローラーを書き加えると思うのですが

Base64形式にして出力する方法があると思いますが
具体的にどこを直せば良いのでしょうか？？

追加した方が良いクラスがありましたら
教えてください！！！！

お願いいたします。

Answer 1

画像ファイルをBASE64形式でエンコードしていないようですし、画像を表示するimgタグもBASE64でエンコードされた画像を出力できるように記述していないので、表示されません。

例えば、

Resource resource = resourceLoader.getResource("classpath:sample.png");
byte[] image = FileUtils.readFileToByteArray(resource.getFile());

String encodedImage = Base64.getEncoder().encodeToString(image);

mnv.addObject("image", encodedImage);

と、BASE64化した画像（対象画像はpng形式を想定）を image の名前でModelAndViewへ格納した場合、

<img src="sample.jpg" th:src="${'data:image/png;base64,' + image}"/>

とすれば表示はされるでしょう。

ただしBASE64形式で表示する画像ファイルについてはレスポンスするHTMLに含まれるため、サイズが数キロバイト程度のものに留めておくべきでしょうか。

---

参考サイト：
小さい画像をbase64をかけてhtml内に埋め込み
Java 8 より導入された java.util.Base64 の利用デモ。

Comments

[Yoshi--]

A-pZさんありがとうございます！
参考にさせていただきます。ありがとうございます！！！